AMBARI-14588 Update spinner. (ababiichuk)

LICENSE.txt

@@ -683,25 +683,6 @@ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-
-For SpiffyGif (ambari-web/app/assets/img/spinner.gif,
-contrib/views/hive/src/main/resources/ui/hive-web/tests/img/spinner.gif)
-
-Home:   http://spiffygif.com
-Author:  https://twitter.com/sean_holbert
-License: SpiffyGif License
-
-You are free to copy and redistribute any images generated from SpiffyGif in any medium or format, even commercially.
-You are permitted to remix, transform, and build upon images generated from SpiffyGif for any purpose, even commercially.
-
-THIS SOFTWARE AND GENERATED IMAGE FILES ARE PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
-AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
-FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
-PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
-AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
-ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-
 For simplejson (ambari-common/src/main/python/ambari_simplejson)
 
 simplejson is dual-licensed software. It is available under the terms

ambari-web/app/controllers/main/admin/highAvailability/progress_popup_controller.js

@@ -87,7 +87,7 @@ App.HighAvailabilityProgressPopupController = Ember.Controller.extend({
         primary: false,
         secondary: false,
         bodyClass: Ember.View.extend({
-          template: Ember.Handlebars.compile('<div class="spinner"></div>')
+          template: Ember.Handlebars.compile('{{view App.SpinnerView}}')
         })
       });
       this.set('spinnerPopup', loadingPopup);

ambari-web/app/controllers/main/host/bulk_operations_controller.js

@@ -572,7 +572,7 @@ App.BulkOperationsController = Em.Controller.extend({
       primary: false,
       secondary: false,
       bodyClass: Em.View.extend({
-        template: Em.Handlebars.compile('<div class="spinner"></div>')
+        template: Em.Handlebars.compile('{{view App.SpinnerView}}')
       })
     });
 

ambari-web/app/mixins/common/reload_popup.js

@@ -50,19 +50,25 @@ App.ReloadPopupMixin = Em.Mixin.create({
     }
   },
 
+  popupText: function(text) {
+    return text || Em.I18n.t('app.reloadPopup.text');
+  },
+
   showReloadPopup: function (text) {
     var self = this,
-      bodyText = text || this.t('app.reloadPopup.text');
+      bodyText = this.popupText(text);
     if (!this.get('reloadPopup')) {
       this.set('reloadPopup', App.ModalPopup.show({
         primary: null,
         secondary: null,
         showFooter: false,
         header: this.t('app.reloadPopup.header'),
-        body: "<div id='reload_popup' class='alert alert-info'><div class='spinner'><span>" +
-          bodyText + "</span></div></div><div><a href='javascript:void(null)' onclick='location.reload();'>" +
-          this.t('app.reloadPopup.link') + "</a></div>",
-        encodeBody: false,
+        bodyClass: Ember.View.extend({
+          template: Ember.Handlebars.compile("<div id='reload_popup' class='alert alert-info'>" +
+            "{{view App.SpinnerView}}" +
+            "<div><span>" + bodyText + "</span><a href='javascript:void(null)' onclick='location.reload();'>"
+            + this.t('app.reloadPopup.link') + "</a></div>")
+        }),
         onClose: function () {
           self.setProperties({
             reloadPopup: null,

ambari-web/app/styles/application.less

@@ -1090,13 +1090,19 @@ h1 {
 .spinner {
   width: @spinner-default-width;
   height: @spinner-default-height;
-  background: url("/img/spinner.gif");
   margin: 0 auto;
+  i {
+    color: #555;
+    font-size: 2.5em;
+  }
 
   &.service-button-spinner {
     width: @spinner-small-width;
     height: @spinner-small-height;
     background-size: cover;
+    i {
+      font-size: 1em;
+    }
   }
 }
 
@@ -1372,6 +1378,9 @@ h1 {
       width: @spinner-small-width;
       height: @spinner-small-height;
       background-size: cover;
+      i {
+        font-size: 1em;
+      }
     }
     .icon-ok-sign, .icon-warning-sign {
       font-size: 27px;
@@ -2780,7 +2789,9 @@ table.graphs {
         height: 105px;
         border: 1px solid silver;
         color: #ffffff;
-        background: url(/img/spinner.gif) no-repeat center center;
+        i {
+          font-size: 4em;
+        }
       }
     }
     .thumbnail .widget-content-isNA{ // for pie chart n\a
@@ -4645,7 +4656,9 @@ ul.inline li {
   height: 157px;
   border: 1px solid silver;
   margin: 20px 15px 10px 15px;
-  background: url(/img/spinner.gif) no-repeat center center;
+  i {
+    font-size: 4em;
+  }
 }
 
 /* TIME RANGE WIDGET END */
@@ -4886,14 +4899,6 @@ li.break {
   }
 }
 
-#reload_popup {
-  .spinner {
-    padding: 8px 35px 0 42px;
-    width: auto;
-    background: url(/img/spinner.gif) no-repeat;
-  }
-}
-
 /*
 .progress-striped .bar {
   background-color: #A5A5A5;

ambari-web/app/styles/enhanced_service_dashboard.less

@@ -137,7 +137,9 @@
         width: 90%;
         height: 100px;
         border: 1px solid #eee;
-        background: url(/img/spinner.gif) no-repeat center center;
+        i {
+          font-size: 4em;
+        }
       }
       .chart-container{
         margin: -4px 8px 0 8px;

ambari-web/app/styles/stack_versions.less

@@ -401,6 +401,9 @@
         width: auto;
         height: @spinner-small-height;
         padding-left: @spinner-small-width + 4px;
+        i {
+          font-size: 1em;
+        }
         background-repeat: no-repeat;
         background-size: contain;
       }

ambari-web/app/templates/common/assign_master_components.hbs

@@ -135,7 +135,7 @@
       <div class="clearfix"></div>
     </div>
   {{else}}
-    <div class="spinner"></div>
+    {{view App.SpinnerView}}
   {{/if}}
   <div class="btn-area">
     <a class="btn pull-left installer-back-btn" {{action back}}>&larr; {{t common.back}}</a>

ambari-web/app/templates/common/configs/service_config.hbs

@@ -67,7 +67,7 @@
           {{/each}}
         </ul>
       {{else}}
-        <div class="pull-left spinner"></div>
+        {{view App.SpinnerView classNames="pull-left"}}
       {{/if}}
 		</span>
       {{#if controller.isHostsConfigsPage}}
@@ -88,7 +88,7 @@
   {{#if allVersionsLoaded}}
     {{view App.ConfigHistoryFlowView serviceBinding="selectedService"}}
   {{else}}
-    <div class="spinner"></div>
+    {{view App.SpinnerView}}
   {{/if}}
 {{/if}}
 
@@ -142,7 +142,7 @@
                 </div>
               {{/each}}
             {{else}}
-              <div class="spinner"></div>
+              {{view App.SpinnerView}}
             {{/if}}
           {{else}}
               {{! Render Enhanced Config Section }}
@@ -168,5 +168,5 @@
     </div>
   {{/if}}
 {{else}}
-  <div class="spinner"></div>
+  {{view App.SpinnerView}}
 {{/if}}

ambari-web/app/templates/common/configs/services_config.hbs

@@ -29,7 +29,7 @@
       {{/each}}
     </ul>
 {{else}}
-    <div class="spinner"></div>
+    {{view App.SpinnerView}}
 {{/if}}
 {{#if hasChangedDependencies}}
   <div class="alert alert-warning">

ambari-web/app/templates/common/configs/widgets/test_db_connection_widget.hbs

@@ -27,7 +27,9 @@
         <div class="pull-left connection-result mll">
           <a {{bindAttr class="view.isConnectionSuccess:mute:action"}} {{action showLogsPopup target="view"}}>{{view.responseCaption}}</a>
         </div>
-        <div {{bindAttr class=":spinner :mll :pull-left view.isConnecting::hide"}}></div>
+        {{#if view.isConnecting}}
+          {{view App.SpinnerView classNames="mll pull-left"}}
+        {{/if}}
         <i {{bindAttr class=":pull-right view.isConnectionSuccess:icon-ok-sign:icon-warning-sign view.isRequestResolved::hide"}}></i>
       </div>
     </div>

ambari-web/app/templates/common/form/check_db_connection.hbs

@@ -25,7 +25,9 @@
         <div class="pull-left connection-result mll">
           <a {{bindAttr class="view.isConnectionSuccess:mute:action"}} {{action showLogsPopup target="view"}}>{{view.responseCaption}}</a>
         </div>
-        <div {{bindAttr class=":spinner :mll :pull-left view.isConnecting::hide"}}></div>
+        {{#if view.isConnecting}}
+          {{view App.SpinnerView classNames="mll pull-left"}}
+        {{/if}}
         <i {{bindAttr class=":pull-right view.isConnectionSuccess:icon-ok-sign:icon-warning-sign view.isRequestResolved::hide"}}></i>
       </div>
     </div>

ambari-web/app/templates/common/host_progress_popup.hbs

@@ -137,7 +137,7 @@
         {{/if}}
       </div>
     {{else}}
-      <div class="spinner"></div>
+      {{view App.SpinnerView}}
     {{/if}}
   </div>
 
@@ -234,11 +234,11 @@
         </div>
       </div>
     {{else}}
-      <div class="spinner"></div>
+      {{view App.SpinnerView}}
     {{/if}}
   </div>
 {{else}}
-  <div class="spinner"></div>
+  {{view App.SpinnerView}}
 {{/if}}
 </div>
 {{#if view.isPaginate}}

ambari-web/app/templates/common/modal_popups/alerts_popup.hbs

@@ -56,7 +56,7 @@
     </div>
 
     <div {{bindAttr class="view.filteringComplete:hidden :table-overlay"}}>
-      <div class="spinner"></div>
+      {{view App.SpinnerView}}
     </div>
 
     {{#if view.isPaginate}}
@@ -74,7 +74,7 @@
       </div>
     {{/if}}
   {{else}}
-    <div class="spinner"></div>
+    {{view App.SpinnerView}}
   {{/if}}
 </div>
 

ambari-web/app/templates/common/modal_popups/widget_browser_popup.hbs

@@ -92,10 +92,10 @@
     </div>
 
     <div class="table-overlay">
-       <div class="spinner"></div>
+       {{view App.SpinnerView}}
     </div>
   {{else}}
-      <div class="spinner"></div>
+      {{view App.SpinnerView}}
   {{/if}}
 </div>
 

ambari-web/app/templates/common/progress.hbs

@@ -67,7 +67,7 @@
       {{/view}}
     {{/each}}
   {{else}}
-    <div class="spinner"></div>
+    {{view App.SpinnerView}}
   {{/if}}
   <div class="btn-area">
     {{#if view.showBackButton}}

ambari-web/app/templates/common/rolling_restart_view.hbs

@@ -68,7 +68,7 @@
 
     </table>
   {{else}}
-    <div class="spinner"></div>
+    {{view App.SpinnerView}}
   {{/if}}
   {{#if view.errors}}
     <div class="alert alert-error">

ambari-web/app/templates/common/widget/gauge_widget.hbs

@@ -51,6 +51,6 @@
       </div>
     {{/if}}
   {{else}}
-    <div class="spinner"></div>
+    {{view App.SpinnerView}}
   {{/if}}
 </div>

ambari-web/app/templates/common/widget/graph_widget.hbs

@@ -37,6 +37,6 @@
     <div class="content"> {{view view.graphView}}</div>
 
   {{else}}
-    <div class="spinner"></div>
+    {{view App.SpinnerView}}
   {{/if}}
 </div>

ambari-web/app/templates/common/widget/number_widget.hbs

@@ -37,6 +37,6 @@
       </div>
     {{/if}}
   {{else}}
-    <div class="spinner"></div>
+    {{view App.SpinnerView}}
   {{/if}}
 </div>

ambari-web/app/templates/common/widget/template_widget.hbs

@@ -37,6 +37,6 @@
       </div>
     {{/if}}
   {{else}}
-    <div class="spinner"></div>
+    {{view App.SpinnerView}}
   {{/if}}
 </div>

ambari-web/app/templates/main/admin/highAvailability/nameNode/rollbackHA/step1.hbs

@@ -45,6 +45,6 @@
           <a {{bindAttr class=":btn controller.isNameServiceIdValid::disabled :btn-success :pull-right"}} {{action done target="view"}}>{{t common.next}} &rarr;</a>
       </div>
   {{else}}
-      <div class="spinner"></div>
+      {{view App.SpinnerView}}
   {{/if}}
 </div>

ambari-web/app/templates/main/admin/highAvailability/nameNode/step3.hbs

@@ -71,7 +71,7 @@
   {{{t admin.highAvailability.wizard.step3.confirm.config.body}}}
   {{view App.ServiceConfigView isNotEditableBinding="controller.isNotEditable"}}
 {{else}}
-  <div class="spinner"></div>
+  {{view App.SpinnerView}}
 {{/if}}
 </div>
 

ambari-web/app/templates/main/admin/highAvailability/resourceManager/step3.hbs

@@ -50,7 +50,7 @@
     {{view App.ServiceConfigView}}
   </div>
 {{else}}
-  <div class="spinner"></div>
+  {{view App.SpinnerView}}
 {{/if}}
 
 <div class="btn-area">

ambari-web/app/templates/main/admin/highAvailability/resourceManager/wizard.hbs

@@ -36,7 +36,7 @@
             {{#if view.isLoaded}}
               {{outlet}}
             {{else}}
-                <div class="spinner"></div>
+                {{view App.SpinnerView}}
             {{/if}}
           </div>
       </div>

ambari-web/app/templates/main/admin/kerberos.hbs

@@ -63,5 +63,5 @@
     </div>
   {{/if}}
 {{else}}
-  <div class="spinner"></div>
+  {{view App.SpinnerView}}
 {{/if}}

ambari-web/app/templates/main/admin/kerberos/step2.hbs

@@ -26,7 +26,7 @@
     {{#if isConfigsLoaded}}
       {{view App.ServicesConfigView}}
     {{else}}
-      <div class="spinner"></div>
+      {{view App.SpinnerView}}
     {{/if}}
 
     <div class="btn-area">

ambari-web/app/templates/main/admin/kerberos/step3.hbs

@@ -77,7 +77,7 @@
             </div>
         {{/if}}
       {{else}}
-          <div class="spinner"></div>
+          {{view App.SpinnerView}}
       {{/if}}
         <div class="btn-area">
           {{#if view.showBackButton}}

ambari-web/app/templates/main/admin/serviceAccounts.hbs

@@ -45,6 +45,6 @@
       <p>{{t admin.misc.nothingToShow}}</p>
     {{/if}}
   {{else}}
-    <div class="spinner"></div>
+    {{view App.SpinnerView}}
   {{/if}}
 </div>

ambari-web/app/templates/main/admin/stack_upgrade/stack_upgrade_wizard.hbs

@@ -49,7 +49,7 @@
                     {{view App.upgradeTaskView contentBinding="view.taskDetails" outsideViewBinding="view.outsideView"}}
                   </div>
                 {{else}}
-                  <div class="clear spinner"></div>
+                  {{view App.SpinnerView classNames="clear"}}
                 {{/if}}
               {{else}}
                 <a href="#" class="pull-right" {{action toggleDetails target="view"}}>{{t admin.stackUpgrade.dialog.details.open}}</a>
@@ -69,7 +69,7 @@
                       {{view App.upgradeTaskView contentBinding="view.taskDetails" outsideViewBinding="view.outsideView"}}
                     </div>
                   {{else}}
-                    <div class="clear spinner"></div>
+                    {{view App.SpinnerView classNames="clear"}}
                   {{/if}}
                 {{else}}
                     <a href="#" class="pull-right" {{action toggleDetails target="view"}}>{{t admin.stackUpgrade.dialog.details.open}}</a>
@@ -138,7 +138,7 @@
                 <div>{{t admin.stackUpgrade.finalize.message.testServices}}</div>
               {{/if}}
             {{else}}
-              <div class="spinner"></div>
+              {{view App.SpinnerView}}
             {{/if}}
 
             <label class="message">
@@ -165,7 +165,7 @@
                 {{t admin.stackUpgrade.failedHosts.message}}
                 <a href="#" {{action showFailedHosts target="view"}}>{{view.failedHostsMessage}}</a>
               {{else}}
-                <div class="spinner"></div>
+                {{view App.SpinnerView}}
               {{/if}}
                 </p>
                 <p>
@@ -240,7 +240,7 @@
                 </div>
               {{/if}}
             {{else}}
-                <div class="spinner"></div>
+                {{view App.SpinnerView}}
             {{/if}}
 
             <label class="message">
@@ -300,6 +300,6 @@
     {{/if}}
   </div>
   {{#unless view.isLoaded}}
-    <div class="spinner"></div>
+    {{view App.SpinnerView}}
   {{/unless}}
 </div>

ambari-web/app/templates/main/admin/stack_upgrade/upgrade_group.hbs

@@ -69,7 +69,7 @@
             {{/each}}
           </div>
         {{else}}
-          <div class="spinner"></div>
+          {{view App.SpinnerView}}
         {{/if}}
       {{/if}}
 

ambari-web/app/templates/main/admin/stack_upgrade/upgrade_options.hbs

@@ -32,7 +32,7 @@
             {{#unless view.isInUpgradeWizard}}
               {{#if method.isCheckRequestInProgress}}
                 <div class="method-precheck-message checking">
-                  <div class="spinner">{{t admin.stackVersions.version.upgrade.upgradeOptions.preCheck.msg.checking}}</div>
+                  {{view App.SpinnerView message="admin.stackVersions.version.upgrade.upgradeOptions.preCheck.msg.checking"}}
                 </div>
               {{else}}
                 <div {{bindAttr class=":method-precheck-message method.precheckResultsMessageClass"}}>

ambari-web/app/templates/main/admin/stack_upgrade/upgrade_task.hbs

@@ -64,6 +64,6 @@
       </div>
     </div>
   {{else}}
-    <div class="spinner"></div>
+    {{view App.SpinnerView}}
   {{/if}}
 {{/if}}

ambari-web/app/templates/main/admin/stack_upgrade/upgrade_version_box.hbs

@@ -72,7 +72,7 @@
     {{/if}}
   {{/if}}
   {{#if view.stateElement.isSpinner}}
-    <div {{bindAttr class="view.stateElement.class"}}></div>
+    {{view App.SpinnerView}}
   {{/if}}
 </div>
 

ambari-web/app/templates/main/admin/stack_upgrade/versions.hbs

@@ -50,6 +50,6 @@
       {{/if}}
     {{/each}}
   {{else}}
-    <div class="spinner"></div>
+    {{view App.SpinnerView}}
   {{/if}}
 </div>

ambari-web/app/templates/main/alerts.hbs

@@ -105,7 +105,7 @@
       <tr>
         <td class="first"></td>
         <td colspan="2">
-          <div class="spinner"></div>
+          {{view App.SpinnerView}}
         </td>
         <td colspan="2"></td>
       </tr>

ambari-web/app/templates/main/alerts/definition_details.hbs

@@ -221,7 +221,7 @@
         </div>
 
       {{else}}
-        <div class="spinner"></div>
+        {{view App.SpinnerView}}
       {{/if}}
 
     </div>
@@ -230,5 +230,5 @@
 
   </div>
 {{else}}
-  <div class="spinner"></div>
+  {{view App.SpinnerView}}
 {{/if}}

ambari-web/app/templates/main/alerts/manage_alert_groups_popup.hbs

@@ -92,5 +92,5 @@
     </div>
   </div>
 {{else}}
-  <div class="spinner"></div>
+  {{view App.SpinnerView}}
 {{/if}}

ambari-web/app/templates/main/alerts/manage_alert_notifications_popup.hbs

@@ -129,5 +129,5 @@
     </div>
   </div>
 {{else}}
-  <div class="spinner"></div>
+  {{view App.SpinnerView}}
 {{/if}}

ambari-web/app/templates/main/charts/heatmap.hbs

@@ -47,11 +47,11 @@
             {{view activeWidget.viewClass contentBinding="activeWidget" racksBinding = "racks" idBinding="activeWidget.id"}}
           </div>
         {{else}}
-          <div class="spinner"></div>
+          {{view App.SpinnerView}}
         {{/if}}
       </div>
     </div>
   {{else}}
-    <div class="spinner"></div>
+    {{view App.SpinnerView}}
   {{/if}}
 </div>

ambari-web/app/templates/main/charts/heatmap/heatmap_rack.hbs

@@ -47,5 +47,7 @@
         </div>
     {{/each}}
   </div>
-  <div {{bindAttr  class="view.rack.isLoaded:hidden :spinner"}}></div>
+  {{#unless view.rack.isLoaded}}
+    {{view App.SpinnerView}}
+  {{/unless}}
 </div>

ambari-web/app/templates/main/dashboard/config_history.hbs

@@ -84,7 +84,7 @@
         </tr>
       {{/if}}
     {{else}}
-      <tr><td colspan="5"><div class="spinner"></div></td></tr>
+      <tr><td colspan="5">{{view App.SpinnerView}}</td></tr>
     {{/if}}
     </tbody>
 </table>

ambari-web/app/templates/main/dashboard/widgets/hbase_links.hbs

@@ -84,7 +84,7 @@
                       {{/each}}
                     {{/if}}
                   {{else}}
-                    <div class="spinner"></div>
+                    {{view App.SpinnerView}}
                   {{/if}}
                 </ul>
               </div>
@@ -92,7 +92,7 @@
           {{/if}}
         </div>
       {{else}}
-        <div class="spinner"></div>
+        {{view App.SpinnerView}}
       {{/if}}
     </li>
   </ul>

ambari-web/app/templates/main/dashboard/widgets/hdfs_links.hbs

@@ -105,7 +105,7 @@
                     {{/each}}
                   {{/if}}
                 {{else}}
-                  <div class="spinner"></div>
+                  {{view App.SpinnerView}}
                 {{/if}}
               </ul>
           </div>

ambari-web/app/templates/main/dashboard/widgets/pie_chart.hbs

@@ -48,7 +48,7 @@
           <div class="widget-content-isNA">{{t services.service.summary.notAvailable}}</div>
         {{/if}}
       {{else}}
-        <div class="spinner"></div>
+        {{view App.SpinnerView}}
       {{/if}}
     </li>
   </ul>

ambari-web/app/templates/main/dashboard/widgets/simple_text.hbs

@@ -41,7 +41,7 @@
         </div>
         <div {{bindAttr class=":widget-content view.hoverContentTopClass"}}>{{view.content}}</div>
       {{else}}
-        <div class="spinner"></div>
+        {{view App.SpinnerView}}
       {{/if}}
     </li>
   </ul>

ambari-web/app/templates/main/dashboard/widgets/uptime.hbs

@@ -46,7 +46,7 @@
           </div>
         {{/if}}
       {{else}}
-        <div class="spinner"></div>
+        {{view App.SpinnerView}}
       {{/if}}
     </li>
   </ul>

ambari-web/app/templates/main/dashboard/widgets/yarn_links.hbs

@@ -72,7 +72,7 @@
                       {{/each}}
                     {{/if}}
                   {{else}}
-                    <div class="spinner"></div>
+                    {{view App.SpinnerView}}
                   {{/if}}
                 </ul>
               </div>
@@ -80,7 +80,7 @@
           {{/if}}
         </div>
       {{else}}
-        <div class="spinner"></div>
+        {{view App.SpinnerView}}
       {{/if}}
     </li>
   </ul>

ambari-web/app/templates/main/host.hbs

@@ -161,7 +161,7 @@
   </table>
 
   <div {{bindAttr class="view.filteringComplete:hidden :table-overlay"}}>
-    <div class="spinner"></div>
+    {{view App.SpinnerView}}
   </div>
 
   <div class="page-bar">

ambari-web/app/templates/main/host/add.hbs

@@ -42,7 +42,7 @@
             {{#if view.isLoaded}}
               {{outlet}}
             {{else}}
-                <div class="spinner"></div>
+                {{view App.SpinnerView}}
             {{/if}}
           </div>
       </div>

ambari-web/app/templates/main/host/configs_service.hbs

@@ -21,6 +21,6 @@
     <div class="clearfix"></div>
     {{view App.ServiceConfigView canEditBinding="view.isConfigsEditable" filterBinding="controller.filter" columnsBinding="controller.filterColumns"}}
   {{else}}
-    <div class="spinner"></div>
+    {{view App.SpinnerView}}
   {{/if}}
 </div>

ambari-web/app/templates/main/host/details.hbs

@@ -67,5 +67,5 @@
     </div>
   </div>
 {{else}}
-  <div class="spinner"></div>
+  {{view App.SpinnerView}}
 {{/if}}

ambari-web/app/templates/main/host/host_alerts.hbs

@@ -71,7 +71,7 @@
     </table>
 
   {{else}}
-    <div class="spinner"></div>
+    {{view App.SpinnerView}}
   {{/if}}
 
   <div class="page-bar">

ambari-web/app/templates/main/service/info/configs.hbs

@@ -50,6 +50,6 @@
     <div class="clearfix"></div>
     {{view App.ServiceConfigView filterBinding="controller.filter" columnsBinding="controller.filterColumns" canEditBinding="controller.canEdit"}}
   {{else}}
-    <div class="spinner"></div>
+    {{view App.SpinnerView}}
   {{/if}}
 </div>

ambari-web/app/templates/main/service/info/configs_save_popup.hbs

@@ -48,5 +48,5 @@
       </table>
   {{/if}}
 {{else}}
-  <div class="spinner"></div>
+  {{view App.SpinnerView}}
 {{/if}}

ambari-web/app/templates/main/service/info/summary.hbs

@@ -64,7 +64,7 @@
     {{#if view.serviceSummaryView}}
       {{view view.serviceSummaryView}}
     {{else}}
-      <div class="spinner"></div>
+      {{view App.SpinnerView}}
     {{/if}}
   </div>
 

ambari-web/app/templates/main/service/item.hbs

@@ -47,7 +47,7 @@
                   {{/if}}
                 {{/if}}
               {{else}}
-                <div class="spinner"></div>
+                {{view App.SpinnerView}}
               {{/if}}
            </ul>
           </li>
@@ -109,7 +109,7 @@
             </li>
             {{/each}}
           {{else}}
-            <div class="spinner service-button-spinner"></div>
+            {{view App.SpinnerView classNames="service-button-spinner"}}
           {{/if}}
         {{/isAuthorized}}
       </ul>

ambari-web/app/templates/main/service/manage_configuration_groups_popup.hbs

@@ -92,5 +92,5 @@
         </div>
     </div>
   {{else}}
-    <div class="spinner"></div>
+    {{view App.SpinnerView}}
   {{/if}}

ambari-web/app/templates/main/service/reassign.hbs

@@ -40,7 +40,7 @@
             {{#if view.isLoaded}}
               {{outlet}}
             {{else}}
-                <div class="spinner"></div>
+                {{view App.SpinnerView}}
             {{/if}}
           </div>
       </div>

ambari-web/app/templates/main/service/widgets/create/step2_add_metric.hbs

@@ -53,7 +53,7 @@
         </li>
       {{/each}}
     {{else}}
-      <div class="spinner"></div>
+      {{view App.SpinnerView}}
     {{/if}}
   </ul>
 </div>

ambari-web/app/templates/wizard/bootstrap_call_popup.hbs

@@ -30,5 +30,5 @@
     <div>
       {{t installer.step2.bootStrap.inProgress}}
     </div>
-    <div class="spinner"></div>
+    {{view App.SpinnerView}}
 {{/if}}

ambari-web/app/templates/wizard/step3.hbs

@@ -143,7 +143,7 @@
     <a href="#" {{action hostWarningsPopup warnings target="controller"}}>{{view.linkText}}</a>
     {{#unless isBootstrapFailed}}
       {{#unless isWarningsLoaded}}
-        <div class="spinner"></div>
+        {{view App.SpinnerView}}
       {{/unless}}
     {{/unless}}
   </div>

ambari-web/app/templates/wizard/step7.hbs

@@ -26,7 +26,7 @@
   {{#if isConfigsLoaded}}
     {{view App.ServicesConfigView}}
   {{else}}
-    <div class="spinner"></div>
+    {{view App.SpinnerView}}
   {{/if}}
 
 

ambari-web/app/templates/wizard/step9/step9HostTasksLogPopup.hbs

@@ -87,7 +87,7 @@
               </div>
           </div>
       {{else}}
-        <div class="spinner"></div>
+        {{view App.SpinnerView}}
       {{/if}}
     </div>
   {{/if}}

ambari-web/app/views.js

@@ -20,6 +20,7 @@
 // load all views here
 
 require('views/application');
+require('views/common/global/spinner');
 require('views/common/ajax_default_error_popup_body');
 require('views/common/chart');
 require('views/common/chart/pie');

ambari-web/app/views/common/global/spinner.js

@@ -0,0 +1,32 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var App = require('app');
+
+App.SpinnerView = Em.View.extend({
+  classNames: 'spinner',
+  message: '',
+
+  translated: function() {
+    return this.get('message') ? Em.I18n.t(this.get('message')) : '';
+  }.property('message'),
+
+  template: function() {
+    return Em.Handlebars.compile('<i class="icon-spinner icon-spin"></i>' + this.get('translated'));
+  }.property()
+});

ambari-web/test/mixins/common/reload_popup_test.js

@@ -28,35 +28,22 @@ describe('App.ReloadPopupMixin', function () {
     obj = Em.Object.create(App.ReloadPopupMixin);
   });
 
-  describe('#showReloadPopup', function () {
-
-    var spanRegExp = new RegExp('<span>([\\s\\S]+)<\/span>'),
-      cases = [
-        {
-          result: Em.I18n.t('app.reloadPopup.text'),
-          title: 'should show modal popup with default message'
-        },
-        {
-          text: 'text',
-          result: 'text',
-          title: 'should show modal popup with custom message'
-        }
-      ];
-
-    beforeEach(function () {
-      sinon.stub(App.ModalPopup, 'show', function (popup) {
-        return popup.body;
-      });
-    });
-
-    afterEach(function () {
-      App.ModalPopup.show.restore();
-    });
+  describe('#popupText', function () {
+    var cases = [
+      {
+        result: Em.I18n.t('app.reloadPopup.text'),
+        title: 'should show modal popup with default message'
+      },
+      {
+        text: 'text',
+        result: 'text',
+        title: 'should show modal popup with custom message'
+      }
+    ];
 
     cases.forEach(function (item) {
       it(item.title, function () {
-        obj.showReloadPopup(item.text);
-        expect(obj.get('reloadPopup').match(spanRegExp)[1]).to.equal(item.result);
+        expect(obj.popupText(item.text)).to.equal(item.result);
       });
     });