Skip to content

Commit ed79b21

Browse files
vishesh92vishesh92
committed
Use Alert component instead of a notification
1 parent 8060abd commit ed79b21

File tree

8 files changed

+101
-52
lines changed

8 files changed

+101
-52
lines changed

‎ui/public/locales/en.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1455,7 +1455,6 @@
14551455
"label.networkspeed": "Network speed",
14561456
"label.networktype": "Network type",
14571457
"label.networkwrite": "Network write",
1458-
"label.new.version.available": "Newer version available",
14591458
"label.new": "New",
14601459
"label.new.autoscale.vmgroup": "New AutoScale Instance Group",
14611460
"label.new.instance.group": "New Instance group",
@@ -3147,8 +3146,8 @@
31473146
"message.no.description": "No description entered.",
31483147
"message.offering.internet.protocol.warning": "WARNING: IPv6 supported Networks use static routing and will require upstream routes to be configured manually.",
31493148
"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>",
3150-
"message.notification.restart.required.network": "Restart required for network(s). Click here to view network(s) which require restart.",
3151-
"message.notification.restart.required.vpc": "Restart required for VPC(s). Click here to view VPC(s) which require restart.",
3149+
"message.restart.required.network": "Restart required for network(s). Click here to view network(s) which require restart.",
3150+
"message.restart.required.vpc": "Restart required for VPC(s). Click here to view VPC(s) which require restart.",
31523151
"message.ovf.configurations": "OVF configurations available for the selected appliance. Please select the desired value. Incompatible compute offerings will get disabled.",
31533152
"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.",
31543153
"message.please.confirm.remove.ssh.key.pair": "Please confirm that you want to remove this SSH key pair.",

‎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/discussions" 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
},
@@ -307,7 +357,7 @@ export default {
307357
}
308358
}
309359
310-
.shutdownHeader {
360+
.alertHeader {
311361
font-weight: bold;
312362
height: 25px;
313363
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: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,9 @@ import {
4040
CUSTOM_COLUMNS,
4141
OAUTH_DOMAIN,
4242
OAUTH_PROVIDER,
43-
LATEST_CS_VERSION
43+
LATEST_CS_VERSION,
44+
NETWORK_RESTART_REQUIRED,
45+
VPC_RESTART_REQUIRED
4446
} from '@/store/mutation-types'
4547

4648
const user = {
@@ -173,6 +175,14 @@ const user = {
173175
SET_LATEST_VERSION: (state, version) => {
174176
vueProps.$localStorage.set(LATEST_CS_VERSION, version)
175177
state.latestVersion = version
178+
},
179+
SET_NETWORK_RESTART_REQUIRED: (state, flag) => {
180+
vueProps.$localStorage.set(NETWORK_RESTART_REQUIRED, flag)
181+
state.networkRestartRequired = flag
182+
},
183+
SET_VPC_RESTART_REQUIRED: (state, flag) => {
184+
vueProps.$localStorage.set(VPC_RESTART_REQUIRED, flag)
185+
state.vpcRestartRequired = flag
176186
}
177187
},
178188

@@ -219,7 +229,11 @@ const user = {
219229
commit('SET_2FA_ISSUER', result.issuerfor2fa)
220230
commit('SET_LOGIN_FLAG', false)
221231
const latestVersion = vueProps.$localStorage.get(LATEST_CS_VERSION, { version: '', fetchedTs: 0 })
232+
const networkRestartRequired = vueProps.$localStorage.get(NETWORK_RESTART_REQUIRED, false)
233+
const vpcRestartRequired = vueProps.$localStorage.get(VPC_RESTART_REQUIRED, false)
222234
commit('SET_LATEST_VERSION', latestVersion)
235+
commit('SET_NETWORK_RESTART_REQUIRED', networkRestartRequired)
236+
commit('SET_VPC_RESTART_REQUIRED', vpcRestartRequired)
223237
notification.destroy()
224238

225239
resolve()
@@ -286,11 +300,15 @@ const user = {
286300
const domainStore = vueProps.$localStorage.get(DOMAIN_STORE, {})
287301
const darkMode = vueProps.$localStorage.get(DARK_MODE, false)
288302
const latestVersion = vueProps.$localStorage.get(LATEST_CS_VERSION, { version: '', fetchedTs: 0 })
303+
const networkRestartRequired = vueProps.$localStorage.get(NETWORK_RESTART_REQUIRED, false)
304+
const vpcRestartRequired = vueProps.$localStorage.get(VPC_RESTART_REQUIRED, false)
289305
const hasAuth = Object.keys(cachedApis).length > 0
290306

291307
commit('SET_DOMAIN_STORE', domainStore)
292308
commit('SET_DARK_MODE', darkMode)
293309
commit('SET_LATEST_VERSION', latestVersion)
310+
commit('SET_NETWORK_RESTART_REQUIRED', networkRestartRequired)
311+
commit('SET_VPC_RESTART_REQUIRED', vpcRestartRequired)
294312
if (hasAuth) {
295313
console.log('Login detected, using cached APIs')
296314
commit('SET_ZONES', cachedZones)
@@ -345,39 +363,11 @@ const user = {
345363
})
346364

347365
api('listNetworks', { restartrequired: true }).then(response => {
348-
if (response.listnetworksresponse.count > 0) {
349-
notification.info({
350-
message: i18n.global.t('label.restartrequired'),
351-
description: i18n.global.t('message.notification.restart.required.network'),
352-
duration: 0,
353-
onClick: () => {
354-
router.push({ path: '/guestnetwork', query: { restartrequired: true } })
355-
},
356-
onClose: () => {
357-
let countNotify = store.getters.countNotify
358-
countNotify > 0 ? countNotify-- : countNotify = 0
359-
store.commit('SET_COUNT_NOTIFY', countNotify)
360-
}
361-
})
362-
}
366+
commit('SET_NETWORK_RESTART_REQUIRED', response.listnetworksresponse.count > 0)
363367
}).catch(ignored => {})
364368

365369
api('listVPCs', { restartrequired: true }).then(response => {
366-
if (response.listvpcsresponse.count > 0) {
367-
notification.info({
368-
message: i18n.global.t('label.restartrequired'),
369-
description: i18n.global.t('message.notification.restart.required.vpc'),
370-
duration: 0,
371-
onClick: () => {
372-
router.push({ path: '/vpc', query: { restartrequired: true } })
373-
},
374-
onClose: () => {
375-
let countNotify = store.getters.countNotify
376-
countNotify > 0 ? countNotify-- : countNotify = 0
377-
store.commit('SET_COUNT_NOTIFY', countNotify)
378-
}
379-
})
380-
}
370+
commit('SET_VPC_RESTART_REQUIRED', response.listvpcsresponse.count > 0)
381371
}).catch(ignored => {})
382372
}
383373

@@ -564,4 +554,16 @@ const user = {
564554
}
565555
}
566556

557+
export function newVersionAvailable () {
558+
return store.getters.userInfo.rolename === 'Root Admin' && store.getters.features.cloudstackversion &&
559+
store.getters?.latestVersion?.version &&
560+
store.getters.features.cloudstackversion.split('-')[0] !== store.getters.latestVersion.version
561+
}
562+
563+
export function numberOfAlerts () {
564+
return store.getters.shutdownTriggered +
565+
store.getters.networkRestartRequired +
566+
store.getters.vpcRestartRequired + newVersionAvailable()
567+
}
568+
567569
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
export const RELOAD_ALL_PROJECTS = 'RELOAD_ALL_PROJECTS'

‎ui/src/views/AutogenView.vue‎

Lines changed: 6 additions & 3 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">
@@ -396,8 +396,7 @@
396396
<br />
397397
</a-modal>
398398
</div>
399-
400-
<div :style="this.$store.getters.shutdownTriggered ? 'margin-top: 24px; margin-bottom: 12px' : null">
399+
<div :style="this.$store.getters.shutdownTriggered ? 'margin-top: ' + numberOfAlerts * 25 + 'px; margin-bottom: 12px' : null">
401400
<div v-if="dataView">
402401
<slot name="resource" v-if="$route.path.startsWith('/quotasummary') || $route.path.startsWith('/publicip')"></slot>
403402
<resource-view
@@ -466,6 +465,7 @@ import OsLogo from '@/components/widgets/OsLogo'
466465
import ResourceIcon from '@/components/view/ResourceIcon'
467466
import BulkActionProgress from '@/components/view/BulkActionProgress'
468467
import TooltipLabel from '@/components/widgets/TooltipLabel'
468+
import { numberOfAlerts } from '@/store/modules/user'
469469
470470
export default {
471471
name: 'Resource',
@@ -668,6 +668,9 @@ export default {
668668
}
669669
},
670670
computed: {
671+
numberOfAlerts () {
672+
return numberOfAlerts()
673+
},
671674
hasSelected () {
672675
return this.selectedRowKeys.length > 0
673676
},

0 commit comments

Comments
 (0)