Deuglify the admin dashboard loading state. Also clean up the code

app/assets/javascripts/admin/controllers/admin-dashboard.js.es6

@@ -1,56 +1,95 @@
 import { setting } from 'discourse/lib/computed';
 import AdminDashboard from 'admin/models/admin-dashboard';
+import VersionCheck from 'admin/models/version-check';
+import Report from 'admin/models/report';
+import AdminUser from 'admin/models/admin-user';
+import computed from 'ember-addons/ember-computed-decorators';
+
+const PROBLEMS_CHECK_MINUTES = 1;
+
+const ATTRIBUTES = [ 'disk_space','admins', 'moderators', 'blocked', 'suspended', 'top_traffic_sources',
+                     'top_referred_topics', 'updated_at'];
+
+const REPORTS = [ 'global_reports', 'page_view_reports', 'private_message_reports', 'http_reports',
+                  'user_reports', 'mobile_reports'];
 
 // This controller supports the default interface when you enter the admin section.
 export default Ember.Controller.extend({
-  loading: true,
+  loading: null,
   versionCheck: null,
-  problemsCheckMinutes: 1,
-
+  dashboardFetchedAt: null,
   showVersionChecks: setting('version_checks'),
 
-  foundProblems: function() {
-    return(Discourse.User.currentProp('admin') && this.get('problems') && this.get('problems').length > 0);
-  }.property('problems'),
+  @computed('problems.length')
+  foundProblems(problemsLength) {
+    return this.currentUser.get('admin') && (problemsLength || 0) > 1;
+  },
 
-  thereWereProblems: function() {
-    if(!Discourse.User.currentProp('admin')) { return false; }
-    if( this.get('foundProblems') ) {
+  @computed('foundProblems')
+  thereWereProblems(foundProblems) {
+    if (!this.currentUser.get('admin')) { return false; }
+
+    if (foundProblems) {
       this.set('hadProblems', true);
       return true;
     } else {
       return this.get('hadProblems') || false;
     }
-  }.property('foundProblems'),
+  },
 
-  loadProblems: function() {
+  fetchDashboard() {
+    if (!this.get('dashboardFetchedAt') || moment().subtract(30, 'minutes').toDate() > this.get('dashboardFetchedAt')) {
+      this.set('dashboardFetchedAt', new Date());
+      this.set('loading', true);
+      const versionChecks = this.siteSettings.version_checks;
+      AdminDashboard.find().then(d => {
+        if (versionChecks) {
+          this.set('versionCheck', VersionCheck.create(d.version_check));
+        }
+
+        REPORTS.forEach(name => this.set(name, d[name].map(r => Report.create(r))));
+
+        const topReferrers = d.top_referrers;
+        if (topReferrers && topReferrers.data) {
+          d.top_referrers.data = topReferrers.data.map(user => AdminUser.create(user));
+          this.set('top_referrers', topReferrers);
+        }
+
+        ATTRIBUTES.forEach(a => this.set(a, d[a]));
+        this.set('loading', false);
+      });
+    }
+
+    if (!this.get('problemsFetchedAt') || moment().subtract(PROBLEMS_CHECK_MINUTES, 'minutes').toDate() > this.get('problemsFetchedAt')) {
+      this.loadProblems();
+    }
+  },
+
+  loadProblems() {
     this.set('loadingProblems', true);
     this.set('problemsFetchedAt', new Date());
-    var c = this;
-    AdminDashboard.fetchProblems().then(function(d) {
-      c.set('problems', d.problems);
-      c.set('loadingProblems', false);
-      if( d.problems && d.problems.length > 0 ) {
-        c.problemsCheckInterval = 1;
-      } else {
-        c.problemsCheckInterval = 10;
-      }
+    AdminDashboard.fetchProblems().then(d => {
+      this.set('problems', d.problems);
+    }).finally(() => {
+      this.set('loadingProblems', false);
     });
   },
 
-  problemsTimestamp: function() {
-    return moment(this.get('problemsFetchedAt')).format('LLL');
-  }.property('problemsFetchedAt'),
+  @computed('problemsFetchedAt')
+  problemsTimestamp(problemsFetchedAt) {
+    return moment(problemsFetchedAt).format('LLL');
+  },
 
-  updatedTimestamp: function() {
-    return moment(this.get('updated_at')).format('LLL');
-  }.property('updated_at'),
+  @computed('updated_at')
+  updatedTimestamp(updatedAt) {
+    return moment(updatedAt).format('LLL');
+  },
 
   actions: {
-    refreshProblems: function() {
+    refreshProblems() {
       this.loadProblems();
     },
-    showTrafficReport: function() {
+    showTrafficReport() {
       this.set("showTrafficReport", true);
     }
   }

app/assets/javascripts/admin/routes/admin-dashboard.js.es6

@@ -1,48 +1,5 @@
-import AdminDashboard from 'admin/models/admin-dashboard';
-import VersionCheck from 'admin/models/version-check';
-import Report from 'admin/models/report';
-import AdminUser from 'admin/models/admin-user';
-
 export default Discourse.Route.extend({
-
-  setupController: function(c) {
-    this.fetchDashboardData(c);
-  },
-
-  fetchDashboardData: function(c) {
-    if( !c.get('dashboardFetchedAt') || moment().subtract(30, 'minutes').toDate() > c.get('dashboardFetchedAt') ) {
-      c.set('dashboardFetchedAt', new Date());
-      var versionChecks = this.siteSettings.version_checks;
-      AdminDashboard.find().then(function(d) {
-        if (versionChecks) {
-          c.set('versionCheck', VersionCheck.create(d.version_check));
-        }
-
-        ['global_reports', 'page_view_reports', 'private_message_reports', 'http_reports', 'user_reports', 'mobile_reports'].forEach(name => {
-          c.set(name, d[name].map(r => Report.create(r)));
-        });
-
-        var topReferrers = d.top_referrers;
-        if (topReferrers && topReferrers.data) {
-          d.top_referrers.data = topReferrers.data.map(function (user) {
-            return AdminUser.create(user);
-          });
-          c.set('top_referrers', topReferrers);
-        }
-
-        [ 'disk_space','admins', 'moderators', 'blocked', 'suspended',
-          'top_traffic_sources', 'top_referred_topics', 'updated_at'].forEach(function(x) {
-          c.set(x, d[x]);
-        });
-
-        c.set('loading', false);
-      });
-    }
-
-    if( !c.get('problemsFetchedAt') || moment().subtract(c.problemsCheckMinutes, 'minutes').toDate() > c.get('problemsFetchedAt') ) {
-      c.set('problemsFetchedAt', new Date());
-      c.loadProblems();
-    }
+  setupController(controller) {
+    controller.fetchDashboard();
   }
 });
-

app/assets/javascripts/admin/templates/dashboard.hbs

@@ -1,6 +1,7 @@
 {{plugin-outlet "admin-dashboard-top"}}
 
-<div class="dashboard-left">
+{{#conditional-loading-spinner condition=loading}}
+  <div class="dashboard-left">
     {{#if showVersionChecks}}
       {{partial 'admin/templates/version-checks'}}
     {{/if}}
@@ -18,11 +19,9 @@
           </tr>
         </thead>
         <tbody>
-        {{#unless loading}}
           {{#each user_reports as |r|}}
             {{admin-report-trust-level-counts report=r}}
           {{/each}}
-        {{/unless}}
         </tbody>
       </table>
     </div>
@@ -57,11 +56,9 @@
           </tr>
         </thead>
         <tbody>
-        {{#unless loading}}
           {{#each global_reports as |r|}}
             {{admin-report-counts report=r}}
           {{/each}}
-        {{/unless}}
         </tbody>
       </table>
     </div>
@@ -79,11 +76,9 @@
           </tr>
         </thead>
         <tbody>
-        {{#unless loading}}
           {{#each page_view_reports as |r|}}
             {{admin-report-counts report=r}}
           {{/each}}
-        {{/unless}}
         </tbody>
       </table>
     </div>
@@ -101,11 +96,9 @@
           </tr>
         </thead>
         <tbody>
-        {{#unless loading}}
           {{#each private_message_reports as |r|}}
             {{admin-report-counts report=r}}
           {{/each}}
-        {{/unless}}
         </tbody>
       </table>
     </div>
@@ -123,11 +116,9 @@
           </tr>
         </thead>
         <tbody>
-        {{#unless loading}}
           {{#each mobile_reports as |r|}}
             {{admin-report-counts report=r}}
           {{/each}}
-        {{/unless}}
         </tbody>
       </table>
     </div>
@@ -143,19 +134,16 @@
           </tr>
         </thead>
         <tbody>
-        {{#unless loading}}
           <tr>
             <td>{{i18n 'admin.dashboard.uploads'}}</td>
             <td>{{disk_space.uploads_used}} ({{i18n 'admin.dashboard.space_free' size=disk_space.uploads_free}})</td>
             <td>{{#if currentUser.admin}}<a href="/admin/backups">{{i18n 'admin.dashboard.backups'}}</a>{{/if}}</td>
             <td>{{disk_space.backups_used}} ({{i18n 'admin.dashboard.space_free' size=disk_space.backups_free}})</td>
           </tr>
-        {{/unless}}
         </tbody>
       </table>
     </div>
 
-  {{#unless loading}}
     {{#if showTrafficReport}}
     <div class="dashboard-stats">
       <table class="table table-condensed table-hover">
@@ -183,16 +171,15 @@
         <a href {{action 'showTrafficReport'}}>{{i18n 'admin.dashboard.show_traffic_report'}}</a>
       </div>
     {{/if}}
-  {{/unless}}
-</div>
-
-<div class="dashboard-right">
+  </div>
 
+  <div class="dashboard-right">
     {{#if foundProblems}}
       <div class="dashboard-stats detected-problems">
         <div class="look-here">{{fa-icon "exclamation-triangle"}}</div>
         <div class="problem-messages">
-        <p class="{{if loadingProblems 'invisible'}}">
+          {{#conditional-loading-spinner condition=loadingProblems}}
+            <p>
               {{i18n 'admin.dashboard.problems_found'}}
               <ul class="{{if loadingProblems 'invisible'}}">
                 {{#each problems as |problem|}}
@@ -204,6 +191,7 @@
               <small>{{i18n 'admin.dashboard.last_checked'}}: {{problemsTimestamp}}</small>
               {{d-button action="refreshProblems" class="btn-small" icon="refresh" label="admin.dashboard.refresh_problems"}}
             </p>
+          {{/conditional-loading-spinner}}
         </div>
         <div class="clearfix"></div>
       </div>
@@ -230,7 +218,6 @@
             <th>{{top_referred_topics.ytitles.num_clicks}}</th>
           </tr>
         </thead>
-      {{#unless loading}}
         {{#each top_referred_topics.data as |data|}}
           <tbody>
             <tr>
@@ -245,7 +232,6 @@
             </tr>
           </tbody>
         {{/each}}
-      {{/unless}}
       </table>
     </div>
 
@@ -258,7 +244,6 @@
             <th>{{top_traffic_sources.ytitles.num_topics}}</th>
           </tr>
         </thead>
-      {{#unless loading}}
         {{#each top_traffic_sources.data as |s|}}
           <tbody>
             <tr>
@@ -268,7 +253,6 @@
             </tr>
           </tbody>
         {{/each}}
-      {{/unless}}
       </table>
     </div>
 
@@ -281,7 +265,6 @@
             <th>{{top_referrers.ytitles.num_topics}}</th>
           </tr>
         </thead>
-      {{#unless loading}}
         {{#each top_referrers.data as |r|}}
           <tbody>
             <tr>
@@ -291,14 +274,14 @@
             </tr>
           </tbody>
         {{/each}}
-      {{/unless}}
       </table>
     </div>
-</div>
-<div class='clearfix'></div>
+  </div>
+  <div class='clearfix'></div>
 
-<div class="dashboard-stats pull-right">
+  <div class="dashboard-stats pull-right">
     <div class="pull-right">{{i18n 'admin.dashboard.last_updated'}} {{updatedTimestamp}}</div>
     <div class='clearfix'></div>
-</div>
-<div class='clearfix'></div>
+  </div>
+  <div class='clearfix'></div>
+{{/conditional-loading-spinner}}

app/assets/javascripts/admin/templates/version-checks.hbs

@@ -8,7 +8,6 @@
         <th colspan="3">{{i18n 'admin.dashboard.latest_version'}}</th>
       </tr>
     </thead>
-    {{#unless loading}}
     <tbody>
       <td class="title">{{i18n 'admin.dashboard.version'}}</td>
       <td class="version-number"><a href={{versionCheck.gitLink}} target="_blank">{{dash-if-empty versionCheck.installed_describe}}</a></td>
@@ -67,6 +66,5 @@
         {{/if}}
       {{/if}}
     </tbody>
-    {{/unless}}
   </table>
 </div>