From 0cd09a8900280d419cc48e3a321454016c45b87f Mon Sep 17 00:00:00 2001 From: Stefan Matheis Date: Fri, 27 Apr 2012 07:18:53 +0000 Subject: [PATCH] SOLR-3238: CoreAdmin UI-Refactoring git-svn-id: https://svn.apache.org/repos/asf/lucene/dev/trunk@1331261 13f79535-47bb-0310-9956-ffa450edef68 --- solr/webapp/web/css/styles/common.css | 5 + solr/webapp/web/css/styles/cores.css | 236 ++++++++---------------- solr/webapp/web/js/scripts/cores.js | 251 ++++++++++++++------------ solr/webapp/web/tpl/cores.html | 164 +++++++---------- 4 files changed, 283 insertions(+), 373 deletions(-) diff --git a/solr/webapp/web/css/styles/common.css b/solr/webapp/web/css/styles/common.css index c6b5fed150e..c06ec563db2 100644 --- a/solr/webapp/web/css/styles/common.css +++ b/solr/webapp/web/css/styles/common.css @@ -28,6 +28,11 @@ input, select, textarea padding: 2px; } +input[readonly=readonly] +{ + border-color: #f0f0f0; +} + button { background-color: #e6e6e6; diff --git a/solr/webapp/web/css/styles/cores.css b/solr/webapp/web/css/styles/cores.css index 8c47a3b2bfe..c60f25d0e38 100644 --- a/solr/webapp/web/css/styles/cores.css +++ b/solr/webapp/web/css/styles/cores.css @@ -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 diff --git a/solr/webapp/web/js/scripts/cores.js b/solr/webapp/web/js/scripts/cores.js index 95b24b61728..ecc1a5eec58 100644 --- a/solr/webapp/web/js/scripts/cores.js +++ b/solr/webapp/web/js/scripts/cores.js @@ -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' ); } } diff --git a/solr/webapp/web/tpl/cores.html b/solr/webapp/web/tpl/cores.html index 89aefd6d3df..d1a0deb2763 100644 --- a/solr/webapp/web/tpl/cores.html +++ b/solr/webapp/web/tpl/cores.html @@ -16,81 +16,88 @@ limitations under the License. -->
+
 
+
-
-
- Reload -
+ + + + + + + +
+ +
+ + + +

+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+ + +

+ +
+
- -
-
- Rename -
-
-
+
- + -

-

+ + -

-

+

+

-

- Rename - Cancel -

+

+ + +

- + -
- -
-
- Swap -
-
-
+
- - + -

-

+ -

-

+

+

-

- Swap - Cancel -

+

+

+ +

+ + +

+ + - - -
-
- -
-
- Unload -
-
- -
-
- Optimize -
@@ -99,7 +106,7 @@ limitations under the License.
-

+

Core

@@ -191,49 +198,6 @@ limitations under the License.