Add wrapper for widget in Dashboard

app/assets/javascripts/components/widget-chart.js

@@ -1,29 +1,11 @@
 ManageIQ.angular.app.component('widgetChart', {
   bindings: {
     widgetId: '@',
+    widgetModel: '<',
   },
   controllerAs: 'vm',
-  controller: ['$http', 'miqService', '$sce', function($http, miqService, $sce) {
-    var vm = this;
-    vm.widgetChartModel = {};
-
-    this.$onInit = function() {
-      $http.get('/dashboard/widget_chart_data/' + vm.widgetId)
-        .then(vm.getData)
-        .catch(miqService.handleFailure);
-      vm.div_id = "dd_w" + vm.widgetId + "_box";
-    };
-
-    vm.getData = function(response) {
-      vm.widgetChartModel.state = response.data.state;
-      if (response.data.content !== null) {
-        vm.widgetChartModel.content = $sce.trustAsHtml(response.data.content);
-      }
-    };
-  }],
   template: [
-    '<div class="mc" id="{{vm.div_id}}" ng-class="{ hidden: vm.widgetChartModel.minimized }">',
-    '  <div class="blank-slate-pf " style="padding: 10px" ng-if="vm.widgetChartModel.state === \'no_data\'">',
+    '  <div class="blank-slate-pf " style="padding: 10px" ng-if="vm.widgetModel.state === \'no_data\'">',
     '    <div class="blank-slate-pf-icon">',
     '      <i class="fa fa-cog">',
     '      </i>',
@@ -32,7 +14,7 @@ ManageIQ.angular.app.component('widgetChart', {
     __('No chart data found.'),
     '    </h1>',
     '  </div>',
-    '  <div class="blank-slate-pf " style="padding: 10px" ng-if="vm.widgetChartModel.state === \'invalid\'">',
+    '  <div class="blank-slate-pf " style="padding: 10px" ng-if="vm.widgetModel.state === \'invalid\'">',
     '    <div class="blank-slate-pf-icon">',
     '      <i class="fa fa-cog">',
     '      </i>',
@@ -44,10 +26,9 @@ ManageIQ.angular.app.component('widgetChart', {
     __('Invalid chart data. Try regenerating the widgets.'),
     '    </p>',
     '  </div>',
-    '  <div ng-if="vm.widgetChartModel.state === \'valid\'">',
-    '    <div ng-bind-html="vm.widgetChartModel.content">',
+    '  <div ng-if="vm.widgetModel.state === \'valid\'">',
+    '    <div ng-bind-html="vm.widgetModel.content">',
     '    </div>',
     '  </div>',
-    '</div>',
   ].join("\n"),
 });

app/assets/javascripts/components/widget-empty.js

@@ -0,0 +1,15 @@
+ManageIQ.angular.app.component('widgetEmpty', {
+  template: [
+    '<div class="blank-slate-pf" style="padding: 10px">',
+    '  <div class="blank-slate-pf-icon">',
+    '    <i class="fa fa-cog"></i>',
+    '  </div>',
+    '   <h1>',
+    __('No data found.'),
+    '   </h1>',
+    '   <p>',
+    __('If this widget is new or has just been added to your dashboard, the data is being generated and should be available soon.'),
+    '   </p>',
+    '</div>',
+  ].join("\n"),
+});

app/assets/javascripts/components/widget-error.js

@@ -0,0 +1,12 @@
+ManageIQ.angular.app.component('widgetError', {
+  template: [
+    '<div class="blank-slate-pf" style="padding: 10px">',
+    '  <div class="blank-slate-pf-icon">',
+    '    <i class="fa fa-cog"></i>',
+    '  </div>',
+    '  <h1>',
+    __('Error: Request for data failed.'),
+    '  </h1>',
+    '</div>',
+  ].join("\n"),
+});

app/assets/javascripts/components/widget-footer.js

@@ -0,0 +1,16 @@
+ManageIQ.angular.app.component('widgetFooter', {
+  bindings: {
+    widgetLastRun: '@',
+    widgetNextRun: '@',
+  },
+  controllerAs: 'vm',
+  template: [
+    '<div class="card-pf-footer">',
+    __('Updated'),
+    '{{vm.widgetLastRun}}',
+    ' | ',
+    __('Next'),
+    '{{vm.widgetNextRun}}',
+    '</div>',
+  ].join("\n"),
+});

app/assets/javascripts/components/widget-menu.js

@@ -1,39 +1,30 @@
 ManageIQ.angular.app.component('widgetMenu', {
   bindings: {
     widgetId: '@',
+    widgetModel: '<',
   },
   controllerAs: 'vm',
-  controller: ['$http', 'miqService', function($http, miqService) {
+  controller: function() {
     var vm = this;
-    vm.widgetMenuModel = {shortcuts: []};
 
     vm.shortcutsMissing = function() {
-      return vm.widgetMenuModel.shortcuts.length === 0;
+      return vm.widgetModel.shortcuts.length === 0;
     };
-
-    this.$onInit = function() {
-      $http.get('/dashboard/widget_menu_data/' + vm.widgetId)
-        .then(function(response) { vm.widgetMenuModel = response.data; })
-        .catch(miqService.handleFailure);
-      vm.div_id = 'dd_w' + vm.widgetId + '_box';
-    };
-  }],
+  },
   template: [
-    '<div class="mc" id="{{vm.div_id}}" ng-class="{ hidden: vm.widgetMenuModel.minimized }">',
-    '  <table class="table table-hover">',
-    '    <tbody>',
-    '      <div ng-if="vm.shortcutsMissing()">',
+    '<table class="table table-hover">',
+    '  <tbody>',
+    '    <div ng-if="vm.shortcutsMissing()">',
     __('No shortcuts are authorized for this user, contact your Administrator'),
-    '      </div>',
-    '      <tr ng-if="!vm.shortcutsMissing()" ng-repeat="shortcut in vm.widgetMenuModel.shortcuts">',
-    '        <td>',
-    '          <a title="' + __("Click to go this location") + '" href="{{shortcut.href}}">',
+    '    </div>',
+    '    <tr ng-repeat="shortcut in vm.widgetModel.shortcuts">',
+    '      <td>',
+    '        <a title="' + __("Click to go this location") + '" ng-href="{{shortcut.href}}">',
     '{{shortcut.description}}',
-    '          </a>',
-    '        </td>',
-    '      </tr>',
-    '    </tbody>',
-    '  </table>',
-    '</div>',
+    '        </a>',
+    '      </td>',
+    '    </tr>',
+    '  </tbody>',
+    '</table>',
   ].join("\n"),
 });

app/assets/javascripts/components/widget-report.js

@@ -1,39 +1,28 @@
 ManageIQ.angular.app.component('widgetReport', {
   bindings: {
     widgetId: '@',
+    widgetModel: '<',
   },
   controllerAs: 'vm',
-  controller: ['$http', 'miqService', '$sce', function($http, miqService, $sce) {
+  controller: function() {
     var vm = this;
-    vm.widgetReportModel = {};
-
-    this.$onInit = function() {
-      $http.get('/dashboard/widget_report_data/' + vm.widgetId)
-        .then(function(response) { vm.widgetReportModel.content = $sce.trustAsHtml(response.data.content);})
-        .catch(miqService.handleFailure);
-      vm.div_id = "dd_w" + vm.widgetId + "_box";
-    };
-
     vm.contentPresent = function() {
-      return vm.widgetReportModel.content !== undefined;
+      return vm.widgetModel && vm.widgetModel.content !== undefined;
     };
-  }],
+  },
   template: [
-    '<div class="mc" id="{{vm.div_id}}" ng-class="{ hidden: vm.widgetReportModel.minimized }">',
-    '  <div class="blank-slate-pf " style="padding: 10px" ng-if="!vm.contentPresent()">',
-    '    <div class="blank-slate-pf-icon">',
-    '      <i class="fa fa-cog">',
-    '      </i>',
-    '      <h1>',
+    '<div class="blank-slate-pf " style="padding: 10px" ng-if="!vm.contentPresent()">',
+    '  <div class="blank-slate-pf-icon">',
+    '    <i class="fa fa-cog">',
+    '    </i>',
+    '    <h1>',
     __('No report data found.'),
-    '      </h1>',
-    '    </div>',
+    '    </h1>',
     '  </div>',
-    '  <div ng-if="vm.contentPresent()">',
-    '    <div ng-bind-html="vm.widgetReportModel.content">',
-    '    </div>',
+    '</div>',
+    '<div ng-if="vm.contentPresent()">',
+    '  <div ng-bind-html="vm.widgetModel.content">',
     '  </div>',
     '</div>',
-
   ].join("\n"),
 });

app/assets/javascripts/components/widget-rss.js

@@ -1,37 +1,27 @@
 ManageIQ.angular.app.component('widgetRss', {
   bindings: {
     widgetId: '@',
+    widgetModel: '<',
   },
   controllerAs: 'vm',
-  controller: ['$http', 'miqService', '$sce', function($http, miqService, $sce) {
+  controller: function() {
     var vm = this;
-    vm.widgetRssModel = {};
-
-    this.$onInit = function() {
-      $http.get('/dashboard/widget_rss_data/' + vm.widgetId)
-        .then(function(response) { vm.widgetRssModel.content = $sce.trustAsHtml(response.data.content); })
-        .catch(miqService.handleFailure);
-      vm.div_id = "dd_w" + vm.widgetId + "_box";
-    };
-
     vm.contentPresent = function() {
-      return vm.widgetRssModel.content !== undefined;
+      return vm.widgetModel && vm.widgetModel.content !== undefined;
     };
-  }],
+  },
   template: [
-    '<div class="mc" id="{{vm.div_id}}"  ng-class="{ hidden: vm.widgetRssModel.minimized }">',
-    '  <div class="blank-slate-pf " style="padding: 10px" ng-if="!vm.contentPresent()">',
-    '    <div class="blank-slate-pf-icon">',
-    '      <i class="fa fa-cog">',
-    '      </i>',
-    '      <h1>',
+    '<div class="blank-slate-pf " style="padding: 10px" ng-if="!vm.contentPresent()">',
+    '  <div class="blank-slate-pf-icon">',
+    '    <i class="fa fa-cog">',
+    '    </i>',
+    '    <h1>',
     __('No RSS Feed data found'),
-    '      </h1>',
-    '    </div>',
+    '    </h1>',
     '  </div>',
-    '  <div ng-if="vm.contentPresent()">',
-    '    <div ng-bind-html="vm.widgetRssModel.content">',
-    '    </div>',
+    '</div>',
+    '<div ng-if="vm.contentPresent()">',
+    '  <div ng-bind-html="vm.widgetModel.content">',
     '  </div>',
     '</div>',
   ].join("\n"),

app/assets/javascripts/components/widget-spinner.js

@@ -0,0 +1,9 @@
+ManageIQ.angular.app.component('widgetSpinner', {
+  template: [
+    '<div class="blank-slate-pf" style="padding: 10px">',
+    '  <div class="blank-slate-pf-icon">',
+    '    <i class="fa fa-spin fa-spinner"></i>',
+    '  </div>',
+    '</div>',
+  ].join("\n"),
+});

app/assets/javascripts/components/widget-wrapper.js

@@ -0,0 +1,85 @@
+ManageIQ.angular.app.component('widgetWrapper', {
+  bindings: {
+    widgetId: '@',
+    widgetType: '@',
+    widgetButtons: '@',
+    widgetBlank: '@',
+    widgetTitle: '@',
+    widgetLastRun: '@',
+    widgetNextRun: '@',
+  },
+  controllerAs: 'vm',
+  controller: ['$http', 'miqService', '$sce', function($http, miqService, $sce) {
+    var vm = this;
+
+    var widgetTypeUrl = {
+      menu: '/dashboard/widget_menu_data/',
+      report: '/dashboard/widget_report_data/',
+      chart: '/dashboard/widget_chart_data/',
+      rss: '/dashboard/widget_rss_data/',
+    };
+
+    var deferred = miqDeferred();
+    vm.promise = deferred.promise;
+
+    this.$onInit = function() {
+      vm.divId = "w_" + vm.widgetId;
+      vm.innerDivId = 'dd_w' + vm.widgetId + '_box';
+      if (vm.widgetBlank === 'false') {
+        $http.get(vm.widgetUrl())
+          .then(function(response) {
+            vm.widgetModel = response.data;
+            // if there's html make it passable
+            if (vm.widgetModel.content) {
+              vm.widgetModel.content =  $sce.trustAsHtml(vm.widgetModel.content);
+            }
+            deferred.resolve();
+          })
+          .catch(function(e) {
+            vm.error = true;
+            miqService.handleFailure(e);
+            deferred.reject();
+          });
+      }
+    };
+
+    vm.widgetUrl  = function() {
+      if (widgetTypeUrl.hasOwnProperty(vm.widgetType)) {
+        return [widgetTypeUrl[vm.widgetType], vm.widgetId].join('/');
+      } else {
+        console.log('Something went wrong. There is no support for widget type of ', vm.widgetType);
+      }
+    };
+  }],
+  template: [
+    '<div ng-attr-id="{{vm.divId}}">',
+    '  <div class="card-pf card-pf-view">',
+    '    <div class="card-pf-body">',
+    '      <div class="card-pf-heading-kebab">',
+    '        <dropdown-menu widget-id="{{vm.widgetId}}" buttons-data="{{vm.widgetButtons}}">',
+    '        </dropdown-menu>',
+    '        <h2 class="card-pf-title sortable-handle ui-sortable-handle" style="cursor:move">',
+    "{{vm.widgetTitle}}",
+    '        </h2>',
+    '      </div>',
+    '    </div>',
+    '    <widget-error ng-if="vm.error === true"></widget-error>',
+    '    <widget-spinner ng-if="!vm.widgetModel && vm.widgetBlank == \'false\' && !vm.error"></widget-spinner>',
+    '    <div ng-if="vm.widgetBlank === \'true\' || vm.widgetModel" ng-attr-id="{{vm.innerDivId}}" ng-class="{ hidden: vm.widgetModel.minimized, mc:true }">',
+    '      <widget-empty ng-if="vm.widgetBlank === \'true\'"></widget-empty>',
+    '      <div ng-if="vm.widgetBlank === \'false\'" ng-switch on="vm.widgetType">',
+    '        <widget-menu ng-switch-when="menu" widget-id="{{vm.widgetId}}" widget-model="vm.widgetModel">',
+    '        </widget-menu>',
+    '        <widget-report ng-switch-when="report" widget-id="{{vm.widgetId}}" widget-model="vm.widgetModel">',
+    '        </widget-report>',
+    '        <widget-chart ng-switch-when="chart" widget-id="{{vm.widgetId}}" widget-model="vm.widgetModel">',
+    '        </widget-chart>',
+    '        <widget-rss ng-switch-when="rss" widget-id="{{vm.widgetId}}" widget-model="vm.widgetModel">',
+    '        </widget-rss>',
+    '      </div>',
+    '      <widget-footer widget-last-run="{{vm.widgetLastRun}}" widget-next-run="{{vm.widgetNextRun}}" ng-if="vm.widgetType !=\'menu\'"></widget-footer>',
+    '    </div>',
+    '  </div>',
+    '</div>',
+  ].join("\n"),
+});

app/helpers/dashboard_helper.rb

@@ -3,4 +3,12 @@ def ext_auth?(auth_option = nil)
     return false unless ::Settings.authentication.mode == 'httpd'
     auth_option ? ::Settings.authentication[auth_option] : true
   end
+
+  def last_next_run(widget)
+    last_run_on = widget.last_run_on_for_user(current_user)
+    next_run_on = widget.next_run_on
+    last_run = last_run_on ? format_timezone(last_run_on, session[:user_tz], "widget_footer") : _('Never')
+    next_run = next_run_on ? format_timezone(next_run_on, session[:user_tz], "widget_footer") :  _('Unknown')
+    [last_run, next_run]
+  end
 end