1- import { scheduleOrQueueMigration } from '@linode/api-v4/lib/linodes' ;
21import { useAllAccountMaintenanceQuery } from '@linode/queries' ;
3- import { ActionsPanel , LinkButton , Notice , Typography } from '@linode/ui' ;
4- import { useDialog } from '@linode/utilities' ;
5- import { useSnackbar } from 'notistack' ;
2+ import { Notice , Typography } from '@linode/ui' ;
63import React from 'react' ;
74
85import { PENDING_MAINTENANCE_FILTER } from 'src/features/Account/Maintenance/utilities' ;
96import { isPlatformMaintenance } from 'src/hooks/usePlatformMaintenance' ;
107
11- import { ConfirmationDialog } from '../ConfirmationDialog/ConfirmationDialog' ;
128import { DateTimeDisplay } from '../DateTimeDisplay' ;
139import { Link } from '../Link' ;
1410
@@ -17,7 +13,6 @@ interface Props {
1713}
1814
1915export const LinodeMaintenanceBanner = ( { linodeId } : Props ) => {
20- const { enqueueSnackbar } = useSnackbar ( ) ;
2116 const { data : allMaintenance } = useAllAccountMaintenanceQuery (
2217 { } ,
2318 PENDING_MAINTENANCE_FILTER ,
@@ -36,118 +31,45 @@ export const LinodeMaintenanceBanner = ({ linodeId }: Props) => {
3631 const maintenanceStartTime =
3732 linodeMaintenance ?. start_time || linodeMaintenance ?. when ;
3833
39- const { closeDialog, dialog, handleError, openDialog, submitDialog } =
40- useDialog < number > ( ( id : number ) => scheduleOrQueueMigration ( id ) ) ;
41-
42- const isScheduled = Boolean ( maintenanceStartTime ) ;
43-
44- const actionLabel = isScheduled
45- ? 'enter the migration queue'
46- : 'schedule your migration' ;
47- const showMigrateAction =
48- linodeId !== undefined && linodeMaintenance ?. type === 'power_off_on' ;
49-
50- const onSubmit = ( ) => {
51- if ( ! linodeId ) {
52- return ;
53- }
54- submitDialog ( linodeId )
55- . then ( ( ) => {
56- const successMessage = isScheduled
57- ? 'Your Linode has been entered into the migration queue.'
58- : 'Your migration has been scheduled.' ;
59- enqueueSnackbar ( successMessage , { variant : 'success' } ) ;
60- } )
61- . catch ( ( ) => {
62- const errorMessage = isScheduled
63- ? 'An error occurred entering the migration queue.'
64- : 'An error occurred scheduling your migration.' ;
65- handleError ( errorMessage ) ;
66- } ) ;
67- } ;
68-
69- const actions = ( ) => (
70- < ActionsPanel
71- primaryButtonProps = { {
72- label : actionLabel ,
73- loading : dialog . isLoading ,
74- onClick : onSubmit ,
75- } }
76- secondaryButtonProps = { {
77- 'data-testid' : 'cancel' ,
78- label : 'Cancel' ,
79- onClick : closeDialog ,
80- } }
81- />
82- ) ;
83-
8434 if ( ! linodeMaintenance ) return null ;
8535
8636 return (
87- < >
88- < Notice data-qa-maintenance-banner = "true" variant = "warning" >
89- < Typography >
90- Linode { linodeMaintenance . entity . label } { ' ' }
91- { linodeMaintenance . description } maintenance { maintenanceTypeLabel } { ' ' }
92- will begin{ ' ' }
93- < strong >
94- { maintenanceStartTime ? (
95- < >
96- < DateTimeDisplay
97- format = "MM/dd/yyyy"
98- sx = { ( theme ) => ( {
99- font : theme . font . bold ,
100- } ) }
101- value = { maintenanceStartTime }
102- /> { ' ' }
103- at{ ' ' }
104- < DateTimeDisplay
105- format = "HH:mm"
106- sx = { ( theme ) => ( {
107- font : theme . font . bold ,
108- } ) }
109- value = { maintenanceStartTime }
110- />
111- </ >
112- ) : (
113- 'soon'
114- ) }
115- </ strong >
116- . For more details, view{ ' ' }
117- < Link
118- pendoId = "linode-maintenance-banner-link"
119- to = "/account/maintenance"
120- >
121- Account Maintenance
122- </ Link >
123- { showMigrateAction ? (
37+ < Notice data-qa-maintenance-banner = "true" variant = "warning" >
38+ < Typography >
39+ Linode { linodeMaintenance . entity . label } { linodeMaintenance . description } { ' ' }
40+ maintenance { maintenanceTypeLabel } will begin{ ' ' }
41+ < strong >
42+ { maintenanceStartTime ? (
12443 < >
125- { ' or ' }
126- < LinkButton onClick = { ( ) => openDialog ( linodeId ) } >
127- { actionLabel }
128- </ LinkButton >
129- { ' now.' }
44+ < DateTimeDisplay
45+ format = "MM/dd/yyyy"
46+ sx = { ( theme ) => ( {
47+ font : theme . font . bold ,
48+ } ) }
49+ value = { maintenanceStartTime }
50+ /> { ' ' }
51+ at{ ' ' }
52+ < DateTimeDisplay
53+ format = "HH:mm"
54+ sx = { ( theme ) => ( {
55+ font : theme . font . bold ,
56+ } ) }
57+ value = { maintenanceStartTime }
58+ />
13059 </ >
13160 ) : (
132- '. '
61+ 'soon '
13362 ) }
134- </ Typography >
135- </ Notice >
136- < ConfirmationDialog
137- actions = { actions }
138- error = { dialog . error }
139- onClose = { ( ) => closeDialog ( ) }
140- open = { dialog . isOpen }
141- title = "Confirm Migration"
142- >
143- < Typography variant = "subtitle1" >
144- Are you sure you want to{ ' ' }
145- { isScheduled
146- ? 'enter the migration queue now'
147- : 'schedule your migration now' }
148- ?
149- </ Typography >
150- </ ConfirmationDialog >
151- </ >
63+ </ strong >
64+ . For more details, view{ ' ' }
65+ < Link
66+ pendoId = "linode-maintenance-banner-link"
67+ to = "/account/maintenance"
68+ >
69+ Account Maintenance
70+ </ Link >
71+ .
72+ </ Typography >
73+ </ Notice >
15274 ) ;
15375} ;
0 commit comments