UI: Notify users when upgrades are available

Notify when a new version of CloudStack or a restart is required for networks & VPCs

Author: vishesh92

ui/public/locales/en.json

@@ -1455,6 +1455,7 @@
 "label.networkspeed": "Network speed",
 "label.networktype": "Network type",
 "label.networkwrite": "Network write",
+"label.new.version.available": "Newer version available",
 "label.new": "New",
 "label.new.autoscale.vmgroup": "New AutoScale Instance Group",
 "label.new.instance.group": "New Instance group",
@@ -3146,6 +3147,8 @@
 "message.no.description": "No description entered.",
 "message.offering.internet.protocol.warning": "WARNING: IPv6 supported Networks use static routing and will require upstream routes to be configured manually.",
 "message.offering.ipv6.warning": "Please refer documentation for creating IPv6 enabled Network/VPC offering <a href='http://docs.cloudstack.apache.org/en/latest/plugins/ipv6.html#isolated-network-and-vpc-tier'>IPv6 support in CloudStack - Isolated Networks and VPC Network Tiers</a>",
+"message.notification.restart.required.network": "Restart required for network(s). Click here to view network(s) which require restart.",
+"message.notification.restart.required.vpc": "Restart required for VPC(s). Click here to view VPC(s) which require restart.",
 "message.ovf.configurations": "OVF configurations available for the selected appliance. Please select the desired value. Incompatible compute offerings will get disabled.",
 "message.path.description": "NFS: exported path from the server. VMFS: /datacenter name/datastore name. SharedMountPoint: path where primary storage is mounted, such as /mnt/primary.",
 "message.please.confirm.remove.ssh.key.pair": "Please confirm that you want to remove this SSH key pair.",

ui/src/components/page/GlobalFooter.vue

@@ -22,6 +22,15 @@
     </div>
     <div class="line" v-if="$store.getters.userInfo.roletype === 'Admin'">
       CloudStack {{ $store.getters.features.cloudstackversion }}
+      <span v-if="$store.getters.features.cloudstackversion && $store.getters.features.cloudstackversion.split('-')[0] !== $store.getters.latestVersion && $store.getters.latestVersion !== ''">
+        <a-divider type="vertical" />
+        <a
+          :href="'https://github.com/apache/cloudstack/releases/tag/' + $store.getters.latestVersion"
+          target="_blank">
+            <info-circle-outlined />
+            {{ $t('label.new.version.available') + ': ' + $store.getters.latestVersion }}
+        </a>
+      </span>
       <a-divider type="vertical" />
       <a href="https://github.com/apache/cloudstack/discussions" target="_blank">
         <github-outlined />

ui/src/store/getters.js

@@ -28,6 +28,7 @@ const getters = {
   apis: state => state.user.apis,
   features: state => state.user.features,
   userInfo: state => state.user.info,
+  latestVersion: state => state.user.latestVersion,
   addRouters: state => state.permission.addRouters,
   multiTab: state => state.app.multiTab,
   listAllProjects: state => state.app.listAllProjects,

ui/src/store/modules/user.js

@@ -24,6 +24,7 @@ import router from '@/router'
 import store from '@/store'
 import { oauthlogin, login, logout, api } from '@/api'
 import { i18n } from '@/locales'
+import { axios } from '../../utils/request'
 
 import {
   ACCESS_TOKEN,
@@ -167,6 +168,9 @@ const user = {
     },
     SET_OAUTH_PROVIDER_USED_TO_LOGIN: (state, provider) => {
       vueProps.$localStorage.set(OAUTH_PROVIDER, provider)
+    },
+    SET_LATEST_VERSION: (state, version) => {
+      state.latestVersion = version
     }
   },
 
@@ -212,6 +216,7 @@ const user = {
           commit('SET_2FA_PROVIDER', result.providerfor2fa)
           commit('SET_2FA_ISSUER', result.issuerfor2fa)
           commit('SET_LOGIN_FLAG', false)
+          commit('SET_LATEST_VERSION', '')
           notification.destroy()
 
           resolve()
@@ -294,6 +299,20 @@ const user = {
             const result = response.listusersresponse.user[0]
             commit('SET_INFO', result)
             commit('SET_NAME', result.firstname + ' ' + result.lastname)
+            if (result.rolename === 'Root Admin') {
+              axios.get(
+                'https://api.github.com/repos/apache/cloudstack/releases'
+              ).then(response => {
+                for (const release of response) {
+                  if (release.tag_name.toLowerCase().includes('rc')) {
+                    continue
+                  } else {
+                    commit('SET_LATEST_VERSION', release.tag_name)
+                    break
+                  }
+                }
+              }).catch(ignored => {})
+            }
             resolve(cachedApis)
           }).catch(error => {
             reject(error)
@@ -332,6 +351,42 @@ const user = {
           }).catch(error => {
             reject(error)
           })
+
+          api('listNetworks', { restartrequired: true }).then(response => {
+            if (response.listnetworksresponse.count > 0) {
+              notification.info({
+                message: i18n.global.t('label.restartrequired'),
+                description: i18n.global.t('message.notification.restart.required.network'),
+                duration: 0,
+                onClick: () => {
+                  router.push({ path: '/guestnetwork', query: { restartrequired: true } })
+                },
+                onClose: () => {
+                  let countNotify = store.getters.countNotify
+                  countNotify > 0 ? countNotify-- : countNotify = 0
+                  store.commit('SET_COUNT_NOTIFY', countNotify)
+                }
+              })
+            }
+          }).catch(ignored => {})
+
+          api('listVPCs', { restartrequired: true }).then(response => {
+            if (response.listvpcsresponse.count > 0) {
+              notification.info({
+                message: i18n.global.t('label.restartrequired'),
+                description: i18n.global.t('message.notification.restart.required.vpc'),
+                duration: 0,
+                onClick: () => {
+                  router.push({ path: '/vpc', query: { restartrequired: true } })
+                },
+                onClose: () => {
+                  let countNotify = store.getters.countNotify
+                  countNotify > 0 ? countNotify-- : countNotify = 0
+                  store.commit('SET_COUNT_NOTIFY', countNotify)
+                }
+              })
+            }
+          }).catch(ignored => {})
         }
 
         api('listUsers', { username: Cookies.get('username') }).then(response => {