refactor

Author: vishesh92

ui/package-lock.json

@@ -60,6 +60,7 @@
     "npm-check-updates": "^6.0.1",
     "nprogress": "^0.2.0",
     "qrious": "^4.0.2",
+    "semver": "^7.6.3",
     "vue": "^3.2.31",
     "vue-chartjs": "^4.0.7",
     "vue-clipboard2": "^0.3.1",

ui/package.json

@@ -8,6 +8,8 @@
     }
   ],
   "docBase": "http://docs.cloudstack.apache.org/en/latest",
+  "alertMessage": "",
+  "alertMessageType": "info",
   "appTitle": "CloudStack",
   "footer": "Licensed under the <a href='http://www.apache.org/licenses/' target='_blank'>Apache License</a>, Version 2.0.",
   "loginTitle": "CloudStack",

ui/public/config.json

@@ -1446,6 +1446,7 @@
 "label.network.offering": "Network offering",
 "label.network.offerings": "Network offerings",
 "label.network.policy": "Network Policy",
+"label.network.restart.required": "Network restart required",
 "label.network.route.table": "Network route table",
 "label.network.routing.policy": "Network routing policy",
 "label.network.permissions": "Network permissions",
@@ -1476,6 +1477,7 @@
 "label.new.secondaryip.description": "Enter new secondary IP address",
 "label.new.tag": "New tag",
 "label.new.vm": "New Instance",
+"label.new.version.available": "New version available",
 "label.newdiskoffering": "New offering",
 "label.newinstance": "New Instance",
 "label.newname": "New name",
@@ -2463,6 +2465,7 @@
 "label.vpc.id": "VPC ID",
 "label.vpc.offerings": "VPC offerings",
 "label.vpc.virtual.router": "VPC virtual router",
+"label.vpc.restart.required": "VPC restart required",
 "label.vpcid": "VPC",
 "label.vpclimit": "VPC limits",
 "label.vpcname": "VPC",
@@ -3185,6 +3188,7 @@
 "message.network.offering.mac.learning.warning": "WARNING: In order to use MAC Learning you must ensure your hypervisor hosts are running ESXi 6.7+ and the Network uses distributed vSwitch 6.6.0+.",
 "message.network.offering.promiscuous.mode": "Applicable for guest Networks on VMware hypervisor only.\nReject - The switch drops any outbound frame from a virtual machine adapter with a source MAC address that is different from the one in the .vmx configuration file.\nAccept - The switch does not perform filtering, and permits all outbound frames.\nNone - Default to value from global setting.",
 "message.network.removenic": "Please confirm that want to remove this NIC, which will also remove the associated Network from the Instance.",
+"message.network.restart.required": "Restart is required for network(s). Click here to view network(s) which require restart.",
 "message.network.secondaryip": "Please confirm that you would like to acquire a new secondary IP for this NIC. \n NOTE: You need to manually configure the newly-acquired secondary IP inside the virtual machine.",
 "message.network.selection": "Choose one or more Networks to attach the Instance to.",
 "message.network.selection.new.network": "A new Network can also be created here.",
@@ -3197,8 +3201,6 @@
 "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.restart.required.network": "Restart is required for network(s). Click here to view network(s) which require restart.",
-"message.restart.required.vpc": "Restart is 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.",
@@ -3529,6 +3531,7 @@
 "message.volume.state.primary.storage.suitability": "The suitability of a primary storage for a volume depends on the disk offering of the volume and on the virtual machine allocation (if the volume is attached to a virtual machine).",
 "message.volumes.managed": "Volumes controlled by CloudStack.",
 "message.volumes.unmanaged": "Volumes not controlled by CloudStack.",
+"message.vpc.restart.required": "Restart is required for VPC(s). Click here to view VPC(s) which require restart.",
 "message.vr.alert.upon.network.offering.creation.l2": "As virtual routers are not created for L2 Networks, the compute offering will not be used.",
 "message.vr.alert.upon.network.offering.creation.others": "As none of the obligatory services for creating a virtual router (VPN, DHCP, DNS, Firewall, LB, UserData, SourceNat, StaticNat, PortForwarding) are enabled, the virtual router will not be created and the compute offering will not be used.",
 "message.warn.change.primary.storage.scope": "This feature is tested and supported for the following configurations:<br>KVM - NFS/Ceph - DefaultPrimary<br>VMware - NFS - DefaultPrimary<br>*There might be extra steps involved to make it work for other configurations.",

ui/public/locales/en.json

@@ -47,10 +47,12 @@
                 </a-avatar>
               </template>
               <template #description>
-                <span v-if="getResourceName(notice.description, 'name') && notice.path">
-                  <router-link :to="{ path: notice.path}"> {{ getResourceName(notice.description, "name") + ' - ' }}</router-link>
+                <span v-if="getResourceName(notice.description, 'name') && notice.path && !['VPC_RESTART_REQUIRED', 'NETWORK_RESTART_REQUIRED'].includes(notice.key)">
+                  <router-link :to="{ path: notice.path}">{{ getResourceName(notice.description, "name") + ' - ' }}</router-link>
+                  {{ getResourceName(notice.description, "msg") }}</span>
+                <span v-else-if="notice.path && ['VPC_RESTART_REQUIRED', 'NETWORK_RESTART_REQUIRED'].includes(notice.key)">
+                  <router-link :to="{ path: notice.path, query: notice.query }">{{ notice.description }}</router-link>
                 </span>
-                <span v-if="getResourceName(notice.description, 'name') && notice.path"> {{ getResourceName(notice.description, "msg") }}</span>
                 <span v-else>{{ notice.description }}</span>
               </template>
             </a-list-item-meta>

ui/src/components/header/HeaderNotice.vue

@@ -22,6 +22,15 @@
     </div>
     <div class="line" v-if="$store.getters.userInfo.roletype === 'Admin'">
       CloudStack {{ $store.getters.features.cloudstackversion }}
+      <span v-if="showVersionUpdate()">
+        <a-divider type="vertical" />
+        <a
+          :href="'https://github.com/apache/cloudstack/releases/tag/' + $store.getters.latestVersion.version"
+          target="_blank">
+            <info-circle-outlined />
+            {{ $t('label.new.version.available') + ': ' + $store.getters.latestVersion.version }}
+        </a>
+      </span>
       <a-divider type="vertical" />
       <a href="https://github.com/apache/cloudstack/discussions" target="_blank">
         <github-outlined />
@@ -32,11 +41,24 @@
 </template>
 
 <script>
+import semver from 'semver'
+import { getParsedVersion } from '@/utils/util'
+
 export default {
   name: 'LayoutFooter',
   data () {
     return {
     }
+  },
+  methods: {
+    showVersionUpdate () {
+      if (this.$store.getters?.features?.cloudstackversion && this.$store.getters?.latestVersion?.version) {
+        const currentVersion = getParsedVersion(this.$store.getters?.features?.cloudstackversion)
+        const latestVersion = getParsedVersion(this.$store.getters?.latestVersion?.version)
+        return semver.gt(latestVersion, currentVersion)
+      }
+      return false
+    }
   }
 }
 </script>

ui/src/components/page/GlobalFooter.vue

@@ -17,54 +17,29 @@
 
 <template>
   <div>
-    <a-affix v-if="numberOfAlerts > 0" >
+    <a-affix v-if="getNumberOfAlerts() > 0" >
       <a-alert
-        v-if="this.$store.getters.shutdownTriggered"
-        :message="$t('message.shutdown.triggered')"
-        type="error"
-        banner
+        v-if="this.$config.alertMessage && this.$config.alertMessage !== ''"
+        :type="this.$config.alertMessageType ? this.$config.alertMessageType : 'info'"
         :showIcon="false"
-        class="alertHeader" />
-
-        <a-alert
-        v-if="newVersionAvailable"
-        type="info"
         banner
-        :showIcon="true"
-        class="alertHeader">
-          <template #message>
-              <a :href="'https://github.com/apache/cloudstack/releases/tag/' + this.$store.getters.latestVersion.version" target="_blank">
-                {{ $t('message.new.version.available') }}: {{  this.$store.getters.latestVersion.version }}
-              </a>
-          </template>
-      </a-alert>
-
-      <a-alert
-        v-if="this.$store.getters.networkRestartRequired"
-        type="warning"
-        :showIcon="true"
         class="alertHeader">
         <template #message>
-          <router-link to="/guestnetwork?restartrequired=true">
-                {{ $t('message.restart.required.network') }}
-          </router-link>
+          <span v-html="$config.alertMessage"></span>
         </template>
-      </a-alert>
+        </a-alert>
 
       <a-alert
-        v-if="this.$store.getters.vpcRestartRequired"
-        type="warning"
-        :showIcon="true"
-        class="alertHeader">
-        <template #message>
-          <router-link to="/vpc?restartrequired=true">
-                {{ $t('message.restart.required.vpc') }}
-          </router-link>
-        </template>
-      </a-alert>
+        v-if="this.$store.getters.shutdownTriggered"
+        :message="$t('message.shutdown.triggered')"
+        type="error"
+        banner
+        :showIcon="false"
+        class="alertHeader" />
+
     </a-affix>
     <a-layout class="layout" :class="[device]">
-      <a-affix style="z-index: 200" :offsetTop="numberOfAlerts * 25">
+      <a-affix style="z-index: 200" :offsetTop="this.getNumberOfAlerts() * 25">
         <template v-if="isSideMenu()">
           <a-drawer
             v-if="isMobile()"
@@ -127,7 +102,7 @@
         <!-- layout header -->
         <a-affix style="z-index: 100">
           <global-header
-            :style="'margin-top: ' + numberOfAlerts * 25 + 'px;'"
+            :style="'margin-top: ' + this.getNumberOfAlerts() * 25 + 'px;'"
             :mode="layoutMode"
             :menus="menus"
             :theme="navTheme"
@@ -168,7 +143,6 @@ import { triggerWindowResizeEvent } from '@/utils/util'
 import { mapState, mapActions } from 'vuex'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import { isAdmin } from '@/role'
-import { numberOfAlerts, newVersionAvailable } from '@/store/modules/user'
 import { api } from '@/api'
 import Drawer from '@/components/widgets/Drawer'
 import Setting from '@/components/view/Setting.vue'
@@ -188,7 +162,8 @@ export default {
       collapsed: false,
       menus: [],
       showSetting: false,
-      showClear: false
+      showClear: false,
+      numberOfAlerts: 0
     }
   },
   computed: {
@@ -198,12 +173,6 @@ export default {
     isAdmin () {
       return isAdmin()
     },
-    numberOfAlerts () {
-      return numberOfAlerts()
-    },
-    newVersionAvailable () {
-      return newVersionAvailable()
-    },
     isDevelopmentMode () {
       return process.env.NODE_ENV === 'development'
     },
@@ -310,6 +279,16 @@ export default {
       api('readyForShutdown', {}).then(json => {
         this.$store.dispatch('SetShutdownTriggered', json.readyforshutdownresponse.readyforshutdown.shutdowntriggered || false)
       })
+    },
+    getNumberOfAlerts () {
+      let count = 0
+      if (this.$store.getters.shutdownTriggered) {
+        count++
+      }
+      if (this.$config.alertMessage && this.$config.alertMessage !== '') {
+        count++
+      }
+      return count
     }
   }
 }

ui/src/components/page/GlobalLayout.vue

@@ -91,6 +91,7 @@
             <router-link :to="{ path: $route.path + '/' + record.id }" v-if="record.id">{{ text }}</router-link>
             <router-link :to="{ path: $route.path + '/' + record.name }" v-else>{{ text }}</router-link>
             <span v-if="['guestnetwork','vpc'].includes($route.path.split('/')[1]) && record.restartrequired">
+              &nbsp;
               <a-tooltip>
                 <template #title>{{ $t('label.restartrequired') }}</template>
                 <warning-outlined style="color: #f5222d"/>

ui/src/components/view/ListView.vue

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