feat(sidebar): add update notification (#3196)

* feat(sidebar): add update notification

* style(sidebar): update notification color palette

* refactor(api): rollback to latest version

* feat(sidebar): update style

* style(sidebar): fix color override

app/portainer/models/status.js

@@ -5,3 +5,8 @@ export function StatusViewModel(data) {
   this.Analytics = data.Analytics;
   this.Version = data.Version;
 }
+
+export function StatusVersionViewModel(data) {
+  this.UpdateAvailable = data.UpdateAvailable;
+  this.LatestVersion = data.LatestVersion;
+}

app/portainer/rest/status.js

@@ -1,7 +1,8 @@
 angular.module('portainer.app')
 .factory('Status', ['$resource', 'API_ENDPOINT_STATUS', function StatusFactory($resource, API_ENDPOINT_STATUS) {
   'use strict';
-  return $resource(API_ENDPOINT_STATUS, {}, {
-    get: { method: 'GET' }
+  return $resource(API_ENDPOINT_STATUS + '/:action', {}, {
+    get: { method: 'GET' },
+    version: { method: 'GET', params: { action: 'version' } }
   });
 }]);

app/portainer/services/api/statusService.js

@@ -1,4 +1,4 @@
-import { StatusViewModel } from "../../models/status";
+import {StatusVersionViewModel, StatusViewModel} from '../../models/status';
 
 angular.module('portainer.app')
 .factory('StatusService', ['$q', 'Status', function StatusServiceFactory($q, Status) {
@@ -20,5 +20,20 @@ angular.module('portainer.app')
     return deferred.promise;
   };
 
+  service.version = function() {
+    var deferred = $q.defer();
+
+    Status.version().$promise
+    .then(function success(data) {
+      var status = new StatusVersionViewModel(data);
+      deferred.resolve(status);
+    })
+    .catch(function error(err) {
+      deferred.reject({ msg: 'Unable to retrieve application version info', err: err });
+    });
+
+    return deferred.promise;
+  };
+
   return service;
 }]);

app/portainer/services/stateManager.js

@@ -19,6 +19,11 @@ function StateManagerFactory($q, SystemService, InfoHelper, LocalStorage, Settin
     extensions: []
   };
 
+  manager.setVersionInfo = function(versionInfo) {
+    state.application.versionStatus = versionInfo;
+    LocalStorage.storeApplicationState(state.application);
+  };
+
   manager.dismissInformationPanel = function(id) {
     state.UI.dismissedInfoPanels[id] = true;
     LocalStorage.storeUIState(state.UI);

app/portainer/views/auth/authController.js

@@ -3,7 +3,7 @@ import uuidv4 from 'uuid/v4';
 
 class AuthenticationController {
   /* @ngInject */
-  constructor($async, $scope, $state, $stateParams, $sanitize, Authentication, UserService, EndpointService, ExtensionService, StateManager, Notifications, SettingsService, URLHelper, LocalStorage) {
+  constructor($async, $scope, $state, $stateParams, $sanitize, Authentication, UserService, EndpointService, ExtensionService, StateManager, Notifications, SettingsService, URLHelper, LocalStorage, StatusService) {
     this.$async = $async;
     this.$scope = $scope;
     this.$state = $state;
@@ -18,6 +18,7 @@ class AuthenticationController {
     this.SettingsService = SettingsService;
     this.URLHelper = URLHelper;
     this.LocalStorage = LocalStorage;
+    this.StatusService = StatusService;
 
     this.logo = this.StateManager.getState().application.logo;
     this.formValues = {
@@ -33,6 +34,7 @@ class AuthenticationController {
     this.retrieveAndSaveEnabledExtensionsAsync = this.retrieveAndSaveEnabledExtensionsAsync.bind(this);
     this.retrievePermissionsAsync = this.retrievePermissionsAsync.bind(this);
     this.checkForEndpointsAsync = this.checkForEndpointsAsync.bind(this);
+    this.checkForLatestVersionAsync = this.checkForLatestVersionAsync.bind(this);
     this.postLoginSteps = this.postLoginSteps.bind(this);
 
     this.oAuthLoginAsync = this.oAuthLoginAsync.bind(this);
@@ -134,10 +136,28 @@ class AuthenticationController {
     }
   }
 
+  async checkForLatestVersionAsync() {
+    let versionInfo = {
+      UpdateAvailable: false,
+      LatestVersion: ''
+    };
+
+    try {
+      const versionStatus = await this.StatusService.version();
+      if (versionStatus.UpdateAvailable) {
+        versionInfo.UpdateAvailable = true;
+        versionInfo.LatestVersion = versionStatus.LatestVersion;
+      }
+    } finally {
+      this.StateManager.setVersionInfo(versionInfo);
+    }
+  }
+
   async postLoginSteps() {
     await this.retrievePermissionsAsync();
     await this.retrieveAndSaveEnabledExtensionsAsync();
     await this.checkForEndpointsAsync(false);
+    await this.checkForLatestVersionAsync();
   }
   /**
    * END POST LOGIN STEPS SECTION

app/portainer/views/sidebar/sidebar.html

@@ -82,8 +82,14 @@
     </li>
   </ul>
   <div class="sidebar-footer-content">
-    <img src="../../../../assets/images/logo_small.png" class="img-responsive logo" alt="Portainer">
-    <span class="version">{{ uiVersion }}</span>
+    <div class="update-notification" ng-if="applicationState.application.versionStatus.UpdateAvailable">
+      <a target="_blank" href="https://github.com/portainer/portainer/releases/tag/{{applicationState.application.versionStatus.LatestVersion}}" style="color: #091E5D;">
+        <i class="fa-lg fas fa-cloud-download-alt" style="margin-right: 2px;"></i> A new version is available</div>
+      </a>
+    <div>
+      <img src="../../../../assets/images/logo_small.png" class="img-responsive logo" alt="Portainer">
+      <span class="version">{{ uiVersion }}</span>
+    </div>
   </div>
   </div>
 </div>