Add Refresh button to individual Dashboard Widget

app/controllers/dashboard_controller.rb

@@ -147,7 +147,9 @@ def start_url
 
   def widget_chart_data
     widget = find_record_with_rbac(MiqWidget, params[:id])
-    datum = widget.contents_for_user(current_user).contents
+    widget_content = widget.contents_for_user(current_user)
+    blank = widget_content.blank?
+    datum = blank ? nil : widget_content.contents
     content = nil
     if datum.blank?
       state = 'no_data'
@@ -159,6 +161,7 @@ def widget_chart_data
     end
     render :json => {:content   => content,
                      :minimized => widget_minimized?(params[:id]),
+                     :blank     => blank,
                      :state     => state}
   end
 
@@ -170,7 +173,8 @@ def widget_menu_data
                   {:description => shortcut.description, :href => shortcut.miq_shortcut.url}
                 end
     render :json => {:shortcuts => shortcuts,
-                     :minimized => widget_minimized?(params[:id])}
+                     :minimized => widget_minimized?(params[:id]),
+                     :blank     => false}
   end
 
   def widget_minimized?(id)
@@ -180,8 +184,12 @@ def widget_minimized?(id)
 
   def widget_report_data
     widget = find_record_with_rbac(MiqWidget, params[:id])
+    widget_content = widget.contents_for_user(current_user)
+    blank = widget_content.blank?
+    content = blank ? nil : widget_content.contents
     render :json => {
-      :content   => widget.contents_for_user(current_user).contents,
+      :blank     => blank,
+      :content   => content,
       :minimized => widget_minimized?(params[:id])
     }
   end
@@ -360,6 +368,17 @@ def widget_zoom
     end
   end
 
+  def widget_refresh
+    assert_privileges("widget_generate_content")
+    w = MiqWidget.find(params[:widget])
+    task_id = w.queue_generate_content
+    if task_id
+      render :json => {:task_id => task_id.to_s}, :status => 200
+    else
+      render :json => {:error => {:message => _("There was an error during refresh.")}}, :status => 400
+    end
+  end
+
   # A widget has been dropped
   def widget_dd_done
     if params[:col1] || params[:col2] || params[:col3]

app/javascript/angular/dashboard/dropdown-menu.js

@@ -1,15 +1,22 @@
 ManageIQ.angular.app.component('dropdownMenu', {
   bindings: {
     widgetId: '@',
-    buttonsData: '@',
+    buttonsData: '<',
   },
   controllerAs: 'vm',
   controller() {
     const vm = this;
 
     vm.$onInit = function() {
       vm.dropdown_id = `btn_${vm.widgetId}`;
-      vm.buttons = JSON.parse(vm.buttonsData);
+      vm.buttons = vm.buttonsData;
+    };
+
+    vm.click = function(button) {
+      if (button.onclick) {
+        return button.onclick();
+      }
+      return true;
     };
   },
   template: `
@@ -29,6 +36,7 @@ ManageIQ.angular.app.component('dropdownMenu', {
              data-method="{{button.dataMethod}}"
              data-miq_sparkle_on="{{button.sparkleOn ? 'true' : 'false'}}"
              href="{{button.href}}"
+             ng-click="vm.click(button)"
              id="{{button.id}}"
              ng-attr-data-remote="{{button.dataRemote}}"
              ng-attr-target="{{button.target}}"

app/javascript/angular/dashboard/widget-wrapper.js

@@ -5,13 +5,12 @@ ManageIQ.angular.app.component('widgetWrapper', {
     widgetId: '@',
     widgetType: '@',
     widgetButtons: '@',
-    widgetBlank: '@',
     widgetTitle: '@',
     widgetLastRun: '@',
     widgetNextRun: '@',
   },
   controllerAs: 'vm',
-  controller: ['$http', 'miqService', '$sce', function($http, miqService, $sce) {
+  controller: ['$http', 'miqService', '$sce', 'API', function($http, miqService, $sce, API) {
     const vm = this;
 
     const widgetTypeUrl = {
@@ -26,23 +25,49 @@ ManageIQ.angular.app.component('widgetWrapper', {
     vm.$onInit = function() {
       vm.divId = `w_${vm.widgetId}`;
       vm.innerDivId = `dd_w${vm.widgetId}_box`;
+      vm.refreshWidgetHTML(false);
+      vm.parsedButtons = JSON.parse(vm.widgetButtons);
+      const refreshButton = vm.parsedButtons.find(ob => ob.id.includes("refresh"));
+      if (refreshButton) {
+        refreshButton.onclick = vm.refresh;
+      };
+    };
 
-      if (vm.widgetBlank === 'false') {
-        $http.get(vm.widgetUrl())
-          .then((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((e) => {
-            vm.error = true;
-            miqService.handleFailure(e);
-            deferred.reject();
-          });
-      }
+    vm.refreshWidgetHTML = function(refreshed) {
+      return $http.get(vm.widgetUrl())
+        .then((response) => {
+          vm.widgetModel = response.data;
+          // if there's html make it passable
+          if (vm.widgetModel.content) {
+            vm.widgetModel.content = $sce.trustAsHtml(vm.widgetModel.content);
+          }
+          if (refreshed) {
+            miqSparkleOff();
+            add_flash(sprintf(__('Dashboard "%s" was refreshed'), vm.widgetTitle), 'success');
+          }
+          vm.error = false;
+          deferred.resolve();
+        })
+        .catch((e) => {
+          vm.error = true;
+          vm.widgetModel = null;
+          miqService.handleFailure(e);
+          deferred.reject();
+        });
+    };
+
+    vm.refresh = function() {
+      $http.post(`/dashboard/widget_refresh/?widget=${vm.widgetId}`)
+        .then((response) => {
+          vm.widgetModel = null;
+          return API.wait_for_task(response.data.task_id).then(vm.refreshWidgetHTML(true));
+        })
+        .catch((e) => {
+          vm.error = true;
+          vm.widgetModel = null;
+          miqService.handleFailure(e);
+          deferred.reject();
+        });
     };
 
     vm.widgetUrl = function() {
@@ -59,20 +84,20 @@ ManageIQ.angular.app.component('widgetWrapper', {
         <div class="card-pf-body">
           <div class="card-pf-heading-kebab">
             <dropdown-menu widget-id="{{vm.widgetId}}"
-                           buttons-data="{{vm.widgetButtons}}"></dropdown-menu>
+                           buttons-data="vm.parsedButtons"></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"
+        <widget-spinner ng-if="!vm.widgetModel && !vm.error"></widget-spinner>
+        <div ng-if="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'"
+          <widget-empty ng-if="vm.widgetModel.blank === true"></widget-empty>
+          <div ng-if="vm.widgetModel.blank === false"
                ng-switch on="vm.widgetType">
             <widget-menu ng-switch-when="menu"
                          widget-id="{{vm.widgetId}}"

app/javascript/spec/dashboard/widget-empty.spec.js

@@ -1,4 +1,5 @@
 import { module, inject } from './mocks';
+require('../helpers/API.js');
 
 require('../helpers/getJSONFixtures.js');
 
@@ -7,28 +8,48 @@ describe('widget-empty', () => {
   let element;
   let $compile;
 
-  beforeEach(module('ManageIQ'));
-  beforeEach(inject((_$compile_, $rootScope) => {
+  beforeEach(() => {
+    module('ManageIQ');
+    angular.mock.module('miq.api');
+  });
+
+  beforeEach(inject((_$compile_, $rootScope, $http) => {
     $scope = $rootScope;
     $scope.miqButtonClicked = () => null;
     $scope.validForm = true;
     $compile = _$compile_;
+    const response = {
+      data: {
+        content: null,
+        minimized: false,
+        blank: true,
+      },
+      status: 200,
+      statusText: 'OK',
+    };
+    spyOn($http, 'get').and.callFake(() => Promise.resolve(response));
+    spyOn(window.vanillaJsAPI, 'post').and.returnValue(Promise.resolve({
+      results: [
+        { success: true, message: 'some' },
+      ],
+    }));
   }));
 
-  it('is rendered in widget-wrapper if widget-blank is set to true', (done) => {
+  it('is rendered in widget-wrapper if blank is set to true', (done) => {
     element = angular.element(`
       <form name="angularForm">
-        <widget-wrapper widget-id="42" widget-blank="true" widget-buttons="null"></widget-wrapper>
+        <widget-wrapper widget-id="42" widget-buttons="[]" widget-type="report"></widget-wrapper>
       </form>
     `);
     element = $compile(element)($scope);
-
     $scope.$digest();
 
-    setTimeout(() => {
+    const $ctrl = element.find('widget-wrapper').find('div').scope().vm;
+    $ctrl.promise.catch(() => null).then(() => {
+      $scope.$digest();
+
       const widget = element.find('widget-empty');
       expect(widget).toHaveLength(1);
-
       done();
     });
   });

app/javascript/spec/dashboard/widget-wrapper.spec.js

@@ -1,4 +1,5 @@
 import { module, inject } from './mocks';
+require('../helpers/API.js');
 
 require('../helpers/getJSONFixtures.js');
 
@@ -8,7 +9,10 @@ describe('widget-wrapper', () => {
   let $compile;
   const widgetTypes = ['chart', 'menu', 'report'];
 
-  beforeEach(module('ManageIQ'));
+  beforeEach(() => {
+    module('ManageIQ');
+    angular.mock.module('miq.api');
+  });
 
   beforeEach(inject((_$compile_, $rootScope, $http) => {
     $scope = $rootScope;
@@ -20,18 +24,24 @@ describe('widget-wrapper', () => {
         content: '<div></div>',
         minimized: false,
         shortcuts: [],
+        blank: false,
       },
       status: 200,
       statusText: 'OK',
     };
     spyOn($http, 'get').and.callFake(() => Promise.resolve(response));
+    spyOn(window.vanillaJsAPI, 'post').and.returnValue(Promise.resolve({
+      results: [
+        { success: true, message: 'some' },
+      ],
+    }));
   }));
 
   widgetTypes.forEach((widget) => {
     it(`renders widget-${widget} when widget-type is ${widget}`, (done) => {
       element = angular.element(`
         <form name="angularForm">
-          <widget-wrapper widget-id="42" widget-blank="false" widget-buttons="null" widget-type="${widget}"></widget-wrapper>
+          <widget-wrapper widget-id="42" widget-blank="false" widget-buttons="[]" widget-type="${widget}"></widget-wrapper>
         </form>
       `);
       element = $compile(element)($scope);

app/presenters/widget_presenter.rb

@@ -78,11 +78,20 @@ def widget_buttons
                    :title      => _("Zoom in on this chart"),
                    :name       => _("Zoom in"),
                    :href       => '/dashboard/widget_zoom?widget=' + @widget.id.to_s,
-                   :fonticon   => 'fa  fa-plus fa-fw',
+                   :fonticon   => 'fa fa-plus fa-fw',
                    :dataRemote => true,
                    :sparkleOn  => true,
                    :dataMethod => 'post')
     end
+    if @widget.content_type != 'menu'
+      buttons.push(:id       => "w_#{@widget.id}_refresh",
+                   :title    => _("Refresh this Widget"),
+                   :name     => _("Refresh"),
+                   :fonticon => 'fa fa-refresh fa-fw',
+                   :href     => 'javascript:;',
+                   :refresh  => true)
+    end
+
     buttons.to_json
   end
 

app/views/dashboard/_widget.html.haml

@@ -1,10 +1,8 @@
 %div{:id => "ww_#{presenter.widget.id}"}
   - last_run, next_run = last_next_run(presenter.widget)
-  - widget_blank = presenter.widget.content_type == 'menu' ? false : presenter.widget.contents_for_user(current_user).blank?
   %widget-wrapper{"widget-id"       => presenter.widget.id,
                   "widget-type"     => presenter.widget.content_type,
                   "widget-buttons"  => presenter.widget_buttons,
-                  "widget-blank"    => widget_blank,
                   "widget-last-run" => last_run,
                   "widget-next-run" => next_run,
                   "widget-title"    => presenter.widget.title}

config/routes.rb

@@ -1196,6 +1196,7 @@
         widget_add
         widget_close
         widget_dd_done
+        widget_refresh
         widget_toggle_minmax
         widget_zoom
       )