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

api/http/handler/status/handler.go

@@ -23,6 +23,8 @@ func NewHandler(bouncer *security.RequestBouncer, status *portainer.Status) *Han
 	}
 	h.Handle("/status",
 		bouncer.PublicAccess(httperror.LoggerHandler(h.statusInspect))).Methods(http.MethodGet)
+	h.Handle("/status/version",
+		bouncer.RestrictedAccess(http.HandlerFunc(h.statusInspectVersion))).Methods(http.MethodGet)
 
 	return h
 }

api/http/handler/status/status_inspect_version.go

@@ -0,0 +1,51 @@
+package status
+
+import (
+	"encoding/json"
+	"net/http"
+
+	"github.com/coreos/go-semver/semver"
+
+	portainer "github.com/portainer/portainer/api"
+	"github.com/portainer/portainer/api/http/client"
+
+	"github.com/portainer/libhttp/response"
+)
+
+type inspectVersionResponse struct {
+	UpdateAvailable bool   `json:"UpdateAvailable"`
+	LatestVersion   string `json:"LatestVersion"`
+}
+
+type githubData struct {
+	TagName string `json:"tag_name"`
+}
+
+// GET request on /api/status/version
+func (handler *Handler) statusInspectVersion(w http.ResponseWriter, r *http.Request) {
+	motd, err := client.Get(portainer.VersionCheckURL, 5)
+	if err != nil {
+		response.JSON(w, &inspectVersionResponse{UpdateAvailable: false})
+		return
+	}
+
+	var data githubData
+	err = json.Unmarshal(motd, &data)
+	if err != nil {
+		response.JSON(w, &inspectVersionResponse{UpdateAvailable: false})
+		return
+	}
+
+	resp := inspectVersionResponse{
+		UpdateAvailable: false,
+	}
+
+	currentVersion := semver.New(portainer.APIVersion)
+	latestVersion := semver.New(data.TagName)
+	if currentVersion.LessThan(*latestVersion) {
+		resp.UpdateAvailable = true
+		resp.LatestVersion = data.TagName
+	}
+
+	response.JSON(w, &resp)
+}

api/portainer.go

@@ -908,6 +908,8 @@ const (
 	AssetsServerURL = "https://portainer-io-assets.sfo2.digitaloceanspaces.com"
 	// MessageOfTheDayURL represents the URL where Portainer MOTD message can be retrieved
 	MessageOfTheDayURL = AssetsServerURL + "/motd.json"
+	// VersionCheckURL represents the URL used to retrieve the latest version of Portainer
+	VersionCheckURL = "https://api.github.com/repos/portainer/portainer/releases/latest"
 	// ExtensionDefinitionsURL represents the URL where Portainer extension definitions can be retrieved
 	ExtensionDefinitionsURL = AssetsServerURL + "/extensions-1.22.0.json"
 	// PortainerAgentHeader represents the name of the header available in any agent response

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>

assets/css/app.css

@@ -396,6 +396,14 @@ ul.sidebar .sidebar-list a.active {
   margin: 2px 0 2px 20px;
 }
 
+.sidebar-footer-content .update-notification {
+    font-size: 14px;
+    padding: 12px;
+    border-radius: 2px;
+    background-color: #FF851B;
+    margin-bottom: 5px;
+}
+
 .sidebar-footer-content .version {
   font-size: 11px;
   margin: 11px 20px 0 7px;