You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@lucene.apache.org by st...@apache.org on 2012/04/27 09:18:53 UTC
svn commit: r1331261 - in /lucene/dev/trunk/solr/webapp/web:
css/styles/common.css css/styles/cores.css js/scripts/cores.js tpl/cores.html
Author: steffkes
Date: Fri Apr 27 07:18:53 2012
New Revision: 1331261
URL: http://svn.apache.org/viewvc?rev=1331261&view=rev
Log:
SOLR-3238: CoreAdmin UI-Refactoring
Modified:
lucene/dev/trunk/solr/webapp/web/css/styles/common.css
lucene/dev/trunk/solr/webapp/web/css/styles/cores.css
lucene/dev/trunk/solr/webapp/web/js/scripts/cores.js
lucene/dev/trunk/solr/webapp/web/tpl/cores.html
Modified: lucene/dev/trunk/solr/webapp/web/css/styles/common.css
URL: http://svn.apache.org/viewvc/lucene/dev/trunk/solr/webapp/web/css/styles/common.css?rev=1331261&r1=1331260&r2=1331261&view=diff
==============================================================================
--- lucene/dev/trunk/solr/webapp/web/css/styles/common.css (original)
+++ lucene/dev/trunk/solr/webapp/web/css/styles/common.css Fri Apr 27 07:18:53 2012
@@ -28,6 +28,11 @@ input, select, textarea
padding: 2px;
}
+input[readonly=readonly]
+{
+ border-color: #f0f0f0;
+}
+
button
{
background-color: #e6e6e6;
Modified: lucene/dev/trunk/solr/webapp/web/css/styles/cores.css
URL: http://svn.apache.org/viewvc/lucene/dev/trunk/solr/webapp/web/css/styles/cores.css?rev=1331261&r1=1331260&r2=1331261&view=diff
==============================================================================
--- lucene/dev/trunk/solr/webapp/web/css/styles/cores.css (original)
+++ lucene/dev/trunk/solr/webapp/web/css/styles/cores.css Fri Apr 27 07:18:53 2012
@@ -1,48 +1,34 @@
#content #cores
{
+ position: relative;
}
-#content #cores #frame
-{
- float: right;
- width: 78%;
-}
-
-#content #cores #navigation
-{
- background-image: url( ../../img/div.gif );
- background-position: 100% 0;
- background-repeat: repeat-y;
- width: 20%;
-}
-
-#content #cores #list
+#content #cores #ui-block
{
- float: left;
- padding-top: 15px;
- width: 100%;
+ background-color: #fff;
+ height: 200px;
+ display: none;
+ position: absolute;
+ left: -5px;
+ top: 35px;
+ width: 500px;
}
-#content #cores #list a
+#content #cores #frame
{
- border-right: 1px solid #f0f0f0;
- display: block;
- margin-left: 1px;
- padding: 3px 0;
+ float: right;
+ width: 86%;
}
-#content #cores #list a:hover
+#content #cores #navigation
{
- background-color: #fafafa;
+ padding-top: 50px;
+ width: 12%;
}
-#content #cores #list .current a
+#content #cores #navigation 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
-{
- padding-left: 40px;
-}
-
-#content #cores .actions form a
+#content #cores .actions div.action
{
- display: block;
- float: left;
- height: 20px;
- margin-right: 5px;
- padding-left: 21px;
+ width: 300px;
}
-#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
-{
- width: 100px;
-}
-
-#content #cores .actions form select option.disabled
-{
- color: #c0c0c0;
-}
-
-#content #cores .actions .button-holder
+#content #cores .actions form select,
+#content #cores .actions form .buttons
{
- float: left;
- margin-right: 10px;
- margin-bottom: 5px;
+ float: right;
+ width: 73%;
}
-#content #cores .actions .button-holder.active
+#content #cores .actions form .buttons
{
- margin-bottom: 0;
+ padding-top: 10px;
}
-#content #cores .actions .button-holder .button
+#content #cores .actions form button.submit
{
- background-color: #f5f5f5;
- border: 1px solid #c0c0c0;
- position: relative;
- z-index: 100;
+ margin-right: 20px;
}
-#content #cores .actions .button-holder.active .button
+#content #cores .actions form button.submit span
{
- background-color: #fff;
- border-bottom-color: #fff;
- padding-bottom: 5px;
+ background-image: url( ../../img/ico/tick.png );
}
-#content #cores .actions .button-holder .button a
+#content #cores .actions form button.reset span
{
- background-position: 5px 50%;
- display: block;
- padding: 1px 5px;
- padding-left: 24px;
+ background-image: url( ../../img/ico/cross.png );
}
-#content #cores .actions .button-holder .button a.success
+#content #cores .actions #add
{
- background-image: url( ../../img/ico/tick.png );
+ left: 0;
+ position: absolute;
}
-#content #cores .actions .button-holder.active .button a
+#content #cores .actions #add span
{
- cursor: auto;
+ background-image: url( ../../img/ico/plus-button.png );
}
-#content #cores .actions .button-holder .button-content
+#content #cores .actions #unload
{
- 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;
+ margin-right: 20px;
}
-#content #cores .actions .button-holder.active .button-content
+#content #cores .actions #unload span
{
- display: block;
+ background-image: url( ../../img/ico/cross.png );
}
-#content #cores .actions .button .reload
+#content #cores .actions #reload span
{
background-image: url( ../../img/ico/arrow-circle.png );
}
-#content #cores .actions .button .rename
+#content #cores .actions #rename span
{
background-image: url( ../../img/ico/ui-text-field-select.png );
}
-#content #cores .actions .button .swap
+#content #cores .actions #swap span
{
background-image: url( ../../img/ico/arrow-switch.png );
}
-#content #cores .actions .button .unload
-{
- background-image: url( ../../img/ico/cross.png );
-}
-
-#content #cores .actions .button .optimize
+#content #cores .actions #optimize
{
- background-image: url( ../../img/ico/hammer-screwdriver.png );
display: none;
}
-#content #cores #navigation .add
-{
- background-image: url( ../../img/ico/plus-button.png );
-}
-
-#content #cores #navigation .add label
+#content #cores .actions #optimize span
{
- width: 85px;
-}
-
-#content #cores #navigation .add input
-{
- width: 155px;
+ background-image: url( ../../img/ico/hammer-screwdriver.png );
}
-#content #cores #navigation .add .buttons
+#content #cores .actions div.action
{
- padding-left: 85px;
+ 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/database.png ); }
+#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
Modified: lucene/dev/trunk/solr/webapp/web/js/scripts/cores.js
URL: http://svn.apache.org/viewvc/lucene/dev/trunk/solr/webapp/web/js/scripts/cores.js?rev=1331261&r1=1331260&r2=1331261&view=diff
==============================================================================
--- lucene/dev/trunk/solr/webapp/web/js/scripts/cores.js (original)
+++ lucene/dev/trunk/solr/webapp/web/js/scripts/cores.js Fri Apr 27 07:18:53 2012
@@ -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 );
+
+ ui_block
+ .css( 'opacity', 0.7 )
+ .width( cores_element.width() + 10 )
+ .height( cores_element.height() );
- button_holder_element
- .die( 'toggle' )
+ $( 'button.action', actions_element )
+ .die( 'click' )
.live
(
- 'toggle',
+ 'click',
function( event )
{
- var element = $( this );
-
- element
- .toggleClass( 'active' );
-
- if( element.hasClass( 'active' ) )
- {
- button_holder_element
- .not( element )
- .removeClass( 'active' );
- }
+ var self = $( this );
+
+ self
+ .toggleClass( 'open' );
+
+ $( '.action.' + self.attr( 'id' ), actions_element )
+ .trigger( 'open' );
+
+ return false;
}
);
- $( '.button a', button_holder_element )
- .die( 'click' )
+ div_action
+ .die( 'close' )
.live
(
- 'click',
+ 'close',
function( event )
{
- $( this ).parents( '.button-holder' )
- .trigger( 'toggle' );
+ div_action.hide();
+ ui_block.hide();
}
- );
-
- $( 'form a.submit', button_holder_element )
- .die( 'click' )
+ )
+ .die( 'open' )
.live
(
- 'click',
+ 'open',
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
- }
- }
- );
+ var self = $( this );
+ var rel = $( '#' + self.data( 'rel' ) );
- return false;
+ self
+ .trigger( 'close' )
+ .show()
+ .css( 'left', rel.position().left );
+
+ ui_block
+ .show();
}
);
- $( 'form a.reset', button_holder_element )
+ $( 'form button.reset', actions_element )
.die( 'click' )
.live
(
'click',
function( event )
{
- $( this ).parents( 'form' )
- .resetForm();
+ $( this ).closest( 'div.action' )
+ .trigger( 'close' );
+ }
+ );
- $( this ).parents( '.button-holder' )
- .trigger( 'toggle' );
-
- return false;
+ 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[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' );
+ }
}
);
- 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' );
}
}
Modified: lucene/dev/trunk/solr/webapp/web/tpl/cores.html
URL: http://svn.apache.org/viewvc/lucene/dev/trunk/solr/webapp/web/tpl/cores.html?rev=1331261&r1=1331260&r2=1331261&view=diff
==============================================================================
--- lucene/dev/trunk/solr/webapp/web/tpl/cores.html (original)
+++ lucene/dev/trunk/solr/webapp/web/tpl/cores.html Fri Apr 27 07:18:53 2012
@@ -16,81 +16,88 @@ limitations under the License.
-->
<div id="cores" class="clearfix">
+ <div id="ui-block"> </div>
+
<div id="frame">
<div id="actions" class="actions clearfix">
- <div class="button-holder">
- <div class="button">
- <a class="reload">Reload</a>
- </div>
- </div>
-
- <div class="button-holder options rename">
- <div class="button">
- <a class="rename">Rename</a>
- </div>
- <div class="button-content">
+ <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>
- <form>
+ <div class="action add" data-rel="add">
- <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="CREATE">
- <p class="clearfix"><label for="rename_other">to:</label>
- <input type="text" name="other" id="rename_other"></p>
+ <p class="clearfix"><label for="add_name">name:</label>
+ <input type="text" name="name" id="add_name" placeholder="new_core"></p>
- <p class="clearfix buttons">
- <a class="submit"><span>Rename</span></a>
- <a class="reset"><span>Cancel</span></a>
- </p>
+ <p class="clearfix"><label for="add_instanceDir">instanceDir:</label>
+ <input type="text" name="instanceDir" id="add_instanceDir" placeholder="new_core"></p>
- </form>
+ <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 swap">
- <div class="button">
- <a class="swap">Swap</a>
- </div>
- <div class="button-content">
- <form>
+ <div class="action rename" data-rel="rename">
- <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="RENAME">
+ <input type="hidden" name="core" data-core="current">
- <p class="clearfix"><label for="swap_other">and:</label>
- <select name="other" id="swap_other" class="other">
- </select></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>Swap</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">
- <div class="button">
- <a class="unload">Unload</a>
- </div>
</div>
-
- <div class="button-holder">
- <div class="button">
- <a class="optimize">Optimize</a>
- </div>
+
+ <div class="action swap" data-rel="swap">
+
+ <form>
+
+ <input type="hidden" name="action" value="SWAP">
+
+ <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"><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>
+
</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>