Skip to content

Commit 1d003e6

Browse files
vishesh92vishesh92
committed
Use Alert component instead of a notification
1 parent 4e7070b commit 1d003e6

File tree

8 files changed

+101
-50
lines changed

8 files changed

+101
-50
lines changed

‎ui/public/locales/en.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1322,7 +1322,6 @@
13221322
"label.networkspeed": "Network speed",
13231323
"label.networktype": "Network type",
13241324
"label.networkwrite": "Network write",
1325-
"label.new.version.available": "Newer version available",
13261325
"label.new": "New",
13271326
"label.new.autoscale.vmgroup": "New AutoScale VM Group",
13281327
"label.new.instance.group": "New instance group",
@@ -2798,10 +2797,11 @@
27982797
"message.network.updateip": "Please confirm that you would like to change the IP address for this NIC on VM.",
27992798
"message.network.usage.info.data.points": "Each data point represents the difference in data traffic since the last data point.",
28002799
"message.network.usage.info.sum.of.vnics": "The network usage shown is made up of the sum of data traffic from all the vNICs in the VM.",
2800+
"message.new.version.available": "New version of cloudstack available. Click here to check the details",
28012801
"message.no.data.to.show.for.period": "No data to show for the selected period.",
28022802
"message.no.description": "No description entered.",
2803-
"message.notification.restart.required.network": "Restart required for network(s). Click here to view network(s) which require restart.",
2804-
"message.notification.restart.required.vpc": "Restart required for VPC(s). Click here to view VPC(s) which require restart.",
2803+
"message.restart.required.network": "Restart required for network(s). Click here to view network(s) which require restart.",
2804+
"message.restart.required.vpc": "Restart required for VPC(s). Click here to view VPC(s) which require restart.",
28052805
"message.offering.internet.protocol.warning": "WARNING: IPv6 supported networks use static routing and will require upstream routes to be configured manually.",
28062806
"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 tiers</a>",
28072807
"message.ovf.configurations": "OVF configurations available for the selected appliance. Please select the desired value. Incompatible compute offerings will get disabled.",

‎ui/src/components/page/GlobalFooter.vue‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,6 @@
2222
</div>
2323
<div class="line" v-if="$store.getters.userInfo.roletype === 'Admin'">
2424
CloudStack {{ $store.getters.features.cloudstackversion }}
25-
<span v-if="$store.getters.features.cloudstackversion && $store.getters?.latestVersion?.version && $store.getters.features.cloudstackversion.split('-')[0] !== $store.getters.latestVersion.version">
26-
<a-divider type="vertical" />
27-
<a
28-
:href="'https://github.com/apache/cloudstack/releases/tag/' + $store.getters.latestVersion.version"
29-
target="_blank">
30-
<info-circle-outlined />
31-
{{ $t('label.new.version.available') + ': ' + $store.getters.latestVersion.version }}
32-
</a>
33-
</span>
3425
<a-divider type="vertical" />
3526
<a href="https://github.com/apache/cloudstack/issues/new" target="_blank">
3627
<github-outlined />

‎ui/src/components/page/GlobalLayout.vue‎

Lines changed: 55 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,54 @@
1717

1818
<template>
1919
<div>
20-
<a-affix v-if="this.$store.getters.shutdownTriggered" >
21-
<a-alert :message="$t('message.shutdown.triggered')" type="error" banner :showIcon="false" class="shutdownHeader" />
20+
<a-affix v-if="numberOfAlerts > 0" >
21+
<a-alert
22+
v-if="this.$store.getters.shutdownTriggered"
23+
:message="$t('message.shutdown.triggered')"
24+
type="error"
25+
banner
26+
:showIcon="false"
27+
class="alertHeader" />
28+
29+
<a-alert
30+
v-if="newVersionAvailable"
31+
type="info"
32+
banner
33+
:showIcon="true"
34+
class="alertHeader">
35+
<template #message>
36+
<a :href="'https://github.com/apache/cloudstack/releases/tag/' + this.$store.getters.latestVersion.version" target="_blank">
37+
{{ $t('message.new.version.available') }}: {{ this.$store.getters.latestVersion.version }}
38+
</a>
39+
</template>
40+
</a-alert>
41+
42+
<a-alert
43+
v-if="this.$store.getters.networkRestartRequired"
44+
type="warning"
45+
:showIcon="true"
46+
class="alertHeader">
47+
<template #message>
48+
<router-link to="/guestnetwork?restartrequired=true">
49+
{{ $t('message.restart.required.network') }}
50+
</router-link>
51+
</template>
52+
</a-alert>
53+
54+
<a-alert
55+
v-if="this.$store.getters.vpcRestartRequired"
56+
type="warning"
57+
:showIcon="true"
58+
class="alertHeader">
59+
<template #message>
60+
<router-link to="/vpc?restartrequired=true">
61+
{{ $t('message.restart.required.vpc') }}
62+
</router-link>
63+
</template>
64+
</a-alert>
2265
</a-affix>
2366
<a-layout class="layout" :class="[device]">
24-
<a-affix style="z-index: 200" :offsetTop="this.$store.getters.shutdownTriggered ? 25 : 0">
67+
<a-affix style="z-index: 200" :offsetTop="numberOfAlerts * 25">
2568
<template v-if="isSideMenu()">
2669
<a-drawer
2770
v-if="isMobile()"
@@ -84,7 +127,7 @@
84127
<!-- layout header -->
85128
<a-affix style="z-index: 100">
86129
<global-header
87-
:style="this.$store.getters.shutdownTriggered ? 'margin-top: 25px;' : null"
130+
:style="'margin-top: ' + numberOfAlerts * 25 + 'px;'"
88131
:mode="layoutMode"
89132
:menus="menus"
90133
:theme="navTheme"
@@ -125,6 +168,7 @@ import { triggerWindowResizeEvent } from '@/utils/util'
125168
import { mapState, mapActions } from 'vuex'
126169
import { mixin, mixinDevice } from '@/utils/mixin.js'
127170
import { isAdmin } from '@/role'
171+
import { numberOfAlerts, newVersionAvailable } from '@/store/modules/user'
128172
import { api } from '@/api'
129173
import Drawer from '@/components/widgets/Drawer'
130174
import Setting from '@/components/view/Setting.vue'
@@ -154,6 +198,12 @@ export default {
154198
isAdmin () {
155199
return isAdmin()
156200
},
201+
numberOfAlerts () {
202+
return numberOfAlerts()
203+
},
204+
newVersionAvailable () {
205+
return newVersionAvailable()
206+
},
157207
isDevelopmentMode () {
158208
return process.env.NODE_ENV === 'development'
159209
},
@@ -294,7 +344,7 @@ export default {
294344
}
295345
}
296346
297-
.shutdownHeader {
347+
.alertHeader {
298348
font-weight: bold;
299349
height: 25px;
300350
text-align: center;

‎ui/src/components/view/ListView.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@
9292
<span v-if="['guestnetwork','vpc'].includes($route.path.split('/')[1]) && record.restartrequired">
9393
<a-tooltip>
9494
<template #title>{{ $t('label.restartrequired') }}</template>
95-
<warning-outlined />
95+
<warning-outlined style="color: #f5222d"/>
9696
</a-tooltip>
9797
</span>
9898
</span>

‎ui/src/store/getters.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ const getters = {
2828
apis: state => state.user.apis,
2929
features: state => state.user.features,
3030
userInfo: state => state.user.info,
31+
networkRestartRequired: state => state.user.networkRestartRequired,
32+
vpcRestartRequired: state => state.user.vpcRestartRequired,
3133
latestVersion: state => state.user.latestVersion,
3234
addRouters: state => state.permission.addRouters,
3335
multiTab: state => state.app.multiTab,

‎ui/src/store/modules/user.js‎

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ import {
3838
DOMAIN_STORE,
3939
DARK_MODE,
4040
LATEST_CS_VERSION,
41+
NETWORK_RESTART_REQUIRED,
42+
VPC_RESTART_REQUIRED,
4143
CUSTOM_COLUMNS
4244
} from '@/store/mutation-types'
4345

@@ -157,6 +159,14 @@ const user = {
157159
SET_LATEST_VERSION: (state, version) => {
158160
vueProps.$localStorage.set(LATEST_CS_VERSION, version)
159161
state.latestVersion = version
162+
},
163+
SET_NETWORK_RESTART_REQUIRED: (state, flag) => {
164+
vueProps.$localStorage.set(NETWORK_RESTART_REQUIRED, flag)
165+
state.networkRestartRequired = flag
166+
},
167+
SET_VPC_RESTART_REQUIRED: (state, flag) => {
168+
vueProps.$localStorage.set(VPC_RESTART_REQUIRED, flag)
169+
state.vpcRestartRequired = flag
160170
}
161171
},
162172

@@ -203,7 +213,11 @@ const user = {
203213
commit('SET_2FA_ISSUER', result.issuerfor2fa)
204214
commit('SET_LOGIN_FLAG', false)
205215
const latestVersion = vueProps.$localStorage.get(LATEST_CS_VERSION, { version: '', fetchedTs: 0 })
216+
const networkRestartRequired = vueProps.$localStorage.get(NETWORK_RESTART_REQUIRED, false)
217+
const vpcRestartRequired = vueProps.$localStorage.get(VPC_RESTART_REQUIRED, false)
206218
commit('SET_LATEST_VERSION', latestVersion)
219+
commit('SET_NETWORK_RESTART_REQUIRED', networkRestartRequired)
220+
commit('SET_VPC_RESTART_REQUIRED', vpcRestartRequired)
207221
notification.destroy()
208222

209223
resolve()
@@ -223,11 +237,15 @@ const user = {
223237
const domainStore = vueProps.$localStorage.get(DOMAIN_STORE, {})
224238
const darkMode = vueProps.$localStorage.get(DARK_MODE, false)
225239
const latestVersion = vueProps.$localStorage.get(LATEST_CS_VERSION, { version: '', fetchedTs: 0 })
240+
const networkRestartRequired = vueProps.$localStorage.get(NETWORK_RESTART_REQUIRED, false)
241+
const vpcRestartRequired = vueProps.$localStorage.get(VPC_RESTART_REQUIRED, false)
226242
const hasAuth = Object.keys(cachedApis).length > 0
227243

228244
commit('SET_DOMAIN_STORE', domainStore)
229245
commit('SET_DARK_MODE', darkMode)
230246
commit('SET_LATEST_VERSION', latestVersion)
247+
commit('SET_NETWORK_RESTART_REQUIRED', networkRestartRequired)
248+
commit('SET_VPC_RESTART_REQUIRED', vpcRestartRequired)
231249
if (hasAuth) {
232250
console.log('Login detected, using cached APIs')
233251
commit('SET_ZONES', cachedZones)
@@ -279,39 +297,11 @@ const user = {
279297
})
280298

281299
api('listNetworks', { restartrequired: true }).then(response => {
282-
if (response.listnetworksresponse.count > 0) {
283-
notification.info({
284-
message: i18n.global.t('label.restartrequired'),
285-
description: i18n.global.t('message.notification.restart.required.network'),
286-
duration: 0,
287-
onClick: () => {
288-
router.push({ path: '/guestnetwork', query: { restartrequired: true } })
289-
},
290-
onClose: () => {
291-
let countNotify = store.getters.countNotify
292-
countNotify > 0 ? countNotify-- : countNotify = 0
293-
store.commit('SET_COUNT_NOTIFY', countNotify)
294-
}
295-
})
296-
}
300+
commit('SET_NETWORK_RESTART_REQUIRED', response.listnetworksresponse.count > 0)
297301
}).catch(ignored => {})
298302

299303
api('listVPCs', { restartrequired: true }).then(response => {
300-
if (response.listvpcsresponse.count > 0) {
301-
notification.info({
302-
message: i18n.global.t('label.restartrequired'),
303-
description: i18n.global.t('message.notification.restart.required.vpc'),
304-
duration: 0,
305-
onClick: () => {
306-
router.push({ path: '/vpc', query: { restartrequired: true } })
307-
},
308-
onClose: () => {
309-
let countNotify = store.getters.countNotify
310-
countNotify > 0 ? countNotify-- : countNotify = 0
311-
store.commit('SET_COUNT_NOTIFY', countNotify)
312-
}
313-
})
314-
}
304+
commit('SET_VPC_RESTART_REQUIRED', response.listvpcsresponse.count > 0)
315305
}).catch(ignored => {})
316306
}
317307

@@ -479,4 +469,16 @@ const user = {
479469
}
480470
}
481471

472+
export function newVersionAvailable () {
473+
return store.getters.userInfo.rolename === 'Root Admin' && store.getters.features.cloudstackversion &&
474+
store.getters?.latestVersion?.version &&
475+
store.getters.features.cloudstackversion.split('-')[0] !== store.getters.latestVersion.version
476+
}
477+
478+
export function numberOfAlerts () {
479+
return store.getters.shutdownTriggered +
480+
store.getters.networkRestartRequired +
481+
store.getters.vpcRestartRequired + newVersionAvailable()
482+
}
483+
482484
export default user

‎ui/src/store/mutation-types.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ export const SERVER_MANAGER = 'SERVER_MANAGER'
3636
export const DOMAIN_STORE = 'DOMAIN_STORE'
3737
export const DARK_MODE = 'DARK_MODE'
3838
export const LATEST_CS_VERSION = 'LATEST_CS_VERSION'
39+
export const NETWORK_RESTART_REQUIRED = 'NETWORK_RESTART_REQUIRED'
40+
export const VPC_RESTART_REQUIRED = 'VPC_RESTART_REQUIRED'
3941
export const VUE_VERSION = 'VUE_VERSION'
4042
export const CUSTOM_COLUMNS = 'CUSTOM_COLUMNS'
4143

‎ui/src/views/AutogenView.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
<template>
1919
<div>
20-
<a-affix :offsetTop="this.$store.getters.shutdownTriggered ? 103 : 78">
20+
<a-affix :offsetTop="78 + (numberOfAlerts * 25)">
2121
<a-card class="breadcrumb-card" style="z-index: 10">
2222
<a-row>
2323
<a-col :span="device === 'mobile' ? 24 : 12" style="padding-left: 12px; margin-top: 10px">
@@ -393,7 +393,7 @@
393393
</a-modal>
394394
</div>
395395

396-
<div :style="this.$store.getters.shutdownTriggered ? 'margin-top: 25px;' : null">
396+
<div>
397397
<div v-if="dataView" style="margin-top: -10px">
398398
<slot name="resource" v-if="$route.path.startsWith('/quotasummary') || $route.path.startsWith('/publicip')"></slot>
399399
<resource-view
@@ -460,6 +460,7 @@ import OsLogo from '@/components/widgets/OsLogo'
460460
import ResourceIcon from '@/components/view/ResourceIcon'
461461
import BulkActionProgress from '@/components/view/BulkActionProgress'
462462
import TooltipLabel from '@/components/widgets/TooltipLabel'
463+
import { numberOfAlerts } from '@/store/modules/user'
463464
464465
export default {
465466
name: 'Resource',
@@ -659,6 +660,9 @@ export default {
659660
}
660661
},
661662
computed: {
663+
numberOfAlerts () {
664+
return numberOfAlerts()
665+
},
662666
hasSelected () {
663667
return this.selectedRowKeys.length > 0
664668
},

0 commit comments

Comments
 (0)