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

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

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 );
+  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
@@ -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
+#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;
 }
 
-#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: 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 );
 }
 
-#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 );
 }
 
-#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 );
 }
 
-#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

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' )
+                  .remove();
-                  .addClass( 'disabled' );
+                
-                                
+                $( 'input[data-core="current"]', cores_element )
-                $( 'input[name="core"]', 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
+                ui_block
-                  .die( 'toggle' )
+                  .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 );
+                      var self = $( this );
-                                        
+
-                      element
+                      self
-                        .toggleClass( 'active' );
+                        .toggleClass( 'open' );
-                                            
+
-                      if( element.hasClass( 'active' ) )
+                      $( '.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
+                        $( 'button[type="submit"] span', form )
-                          .not( element )
+                          .addClass( 'loader' );
-                          .removeClass( 'active' );
+                      },
+                      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 )
+                var reload_button = $( '#actions #reload', cores_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 );
                 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' );
                           }
                         }

solr/webapp/web/tpl/cores.html

@@ -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">
+      <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 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="hidden" name="action" value="RENAME">
-            <input type="text" name="core" id="rename_core" readonly="readonly"></p>
+          <input type="hidden" name="core" data-core="current">
 
-            <p class="clearfix"><label for="rename_other">to:</label>
+          <p class="clearfix"><label for="rename_other">New Name:</label>
-            <input type="text" name="other" id="rename_other"></p>
+          <input type="text" name="other" data-core="current" 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 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">
+        <form>
-            <input type="hidden" name="core">
 
-            <p class="clearfix"><label for="swap_core">this:</label>
+          <input type="hidden" name="action" value="SWAP">
-            <select id="swap_core" class="core" disabled="disabled">
-            </select></p>
 
-            <p class="clearfix"><label for="swap_other">and:</label>
+          <p class="clearfix"><label for="swap_core">this:</label>
-            <select name="other" id="swap_other" class="other">
+          <input type="text" id="swap_core" name="core" data-core="current" readonly="readonly"></p>
-            </select></p>
 
-            <p class="clearfix buttons">
+          <p class="clearfix"><label for="swap_other">and:</label>
-              <a class="submit"><span>Swap</span></a>
+          <select name="other" id="swap_other" name="other" class="other">
-              <a class="reset"><span>Cancel</span></a>
+          </select></p>
-            </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>