Skip to content

Commit e0a85f1

Browse files
phixMephix
phixMe
and
phix
authored
Web Refresh + Loading States (#2779)
* Refresh for jobs, datasets, and events pages. * Fixing loading states. * Adding method call. --------- Co-authored-by: phix <peter.hicks@astronomer.io>
1 parent 2aa578a commit e0a85f1

3 files changed

Lines changed: 132 additions & 29 deletions

File tree

‎web/src/routes/datasets/Datasets.tsx‎

Lines changed: 47 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
// SPDX-License-Identifier: Apache-2.0
33

44
import * as Redux from 'redux'
5-
import { ChevronLeftRounded, ChevronRightRounded } from '@mui/icons-material'
65
import {
6+
Button,
77
Chip,
88
Container,
99
Table,
@@ -14,6 +14,7 @@ import {
1414
Tooltip,
1515
createTheme,
1616
} from '@mui/material'
17+
import { ChevronLeftRounded, ChevronRightRounded, Refresh } from '@mui/icons-material'
1718
import { Dataset } from '../../types/api'
1819
import { IState } from '../../store/reducers'
1920
import { MqScreenLoad } from '../../components/core/screen-load/MqScreenLoad'
@@ -25,6 +26,7 @@ import { fetchDatasets, resetDatasets } from '../../store/actionCreators'
2526
import { formatUpdatedAt } from '../../helpers'
2627
import { useTheme } from '@emotion/react'
2728
import Box from '@mui/material/Box'
29+
import CircularProgress from '@mui/material/CircularProgress/CircularProgress'
2830
import IconButton from '@mui/material/IconButton'
2931
import MqEmpty from '../../components/core/empty/MqEmpty'
3032
import MqStatus from '../../components/core/status/MqStatus'
@@ -93,26 +95,58 @@ const Datasets: React.FC<DatasetsProps> = ({
9395
const i18next = require('i18next')
9496
return (
9597
<Container maxWidth={'lg'} disableGutters>
96-
<MqScreenLoad loading={isDatasetsLoading || !isDatasetsInit}>
98+
<Box p={2} display={'flex'} justifyContent={'space-between'} alignItems={'center'}>
99+
<Box display={'flex'}>
100+
<MqText heading>{i18next.t('datasets_route.heading')}</MqText>
101+
<Chip
102+
size={'small'}
103+
variant={'outlined'}
104+
color={'primary'}
105+
sx={{ marginLeft: 1 }}
106+
label={totalCount + ' total'}
107+
></Chip>
108+
</Box>
109+
<Box display={'flex'} alignItems={'center'}>
110+
{isDatasetsLoading && <CircularProgress size={16} />}
111+
<Tooltip title={'Refresh'}>
112+
<IconButton
113+
sx={{ ml: 2 }}
114+
color={'primary'}
115+
size={'small'}
116+
onClick={() => {
117+
if (selectedNamespace) {
118+
fetchDatasets(selectedNamespace, PAGE_SIZE, state.page * PAGE_SIZE)
119+
}
120+
}}
121+
>
122+
<Refresh fontSize={'small'} />
123+
</IconButton>
124+
</Tooltip>
125+
</Box>
126+
</Box>
127+
<MqScreenLoad loading={isDatasetsLoading && !isDatasetsInit}>
97128
<>
98129
{datasets.length === 0 ? (
99130
<Box p={2}>
100131
<MqEmpty title={i18next.t('datasets_route.empty_title')}>
101-
<MqText subdued>{i18next.t('datasets_route.empty_body')}</MqText>
132+
<>
133+
<MqText subdued>{i18next.t('datasets_route.empty_body')}</MqText>
134+
<Button
135+
color={'primary'}
136+
size={'small'}
137+
onClick={() => {
138+
if (selectedNamespace) {
139+
fetchDatasets(selectedNamespace, PAGE_SIZE, state.page * PAGE_SIZE)
140+
}
141+
}}
142+
>
143+
Refresh
144+
</Button>
145+
</>
102146
</MqEmpty>
103147
</Box>
104148
) : (
105149
<>
106-
<Box p={2} display={'flex'}>
107-
<MqText heading>{i18next.t('datasets_route.heading')}</MqText>
108-
<Chip
109-
size={'small'}
110-
variant={'outlined'}
111-
color={'primary'}
112-
sx={{ marginLeft: 1 }}
113-
label={totalCount + ' total'}
114-
></Chip>
115-
</Box>
116150
<Table size='small'>
117151
<TableHead>
118152
<TableRow>

‎web/src/routes/events/Events.tsx‎

Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
Tooltip,
1515
createTheme,
1616
} from '@mui/material'
17-
import { ChevronLeftRounded, ChevronRightRounded } from '@mui/icons-material'
17+
import { ChevronLeftRounded, ChevronRightRounded, Refresh } from '@mui/icons-material'
1818
import { Event } from '../../types/api'
1919
import { IState } from '../../store/reducers'
2020
import { MqScreenLoad } from '../../components/core/screen-load/MqScreenLoad'
@@ -131,7 +131,12 @@ const Events: React.FC<EventsProps> = ({
131131
const params: { [key: string]: string } = {}
132132
searchParams.forEach((value, key) => (params[key] = value))
133133
setSearchParams({ ...params, [keyDate]: formatDateAPIQuery(e.toDate()) })
134-
setState({ [keyDate]: formatDatePicker(e.toDate()), page: 0, rowExpanded: null } as any)
134+
setState({
135+
...state,
136+
[keyDate]: formatDatePicker(e.toDate()),
137+
page: 0,
138+
rowExpanded: null,
139+
} as any)
135140
}
136141

137142
const handleClickPage = (direction: 'prev' | 'next') => {
@@ -154,6 +159,14 @@ const Events: React.FC<EventsProps> = ({
154159
saveAs(blob, `${title}.json`)
155160
}
156161

162+
const refresh = () => {
163+
const dateFrom =
164+
searchParams.get('dateFrom') || formatDateAPIQuery(moment().startOf('day').toString())
165+
const dateTo =
166+
searchParams.get('dateTo') || formatDateAPIQuery(moment().endOf('day').toString())
167+
fetchEvents(dateFrom, dateTo, PAGE_SIZE, state.page * PAGE_SIZE)
168+
}
169+
157170
const i18next = require('i18next')
158171
const theme = createTheme(useTheme())
159172

@@ -174,6 +187,17 @@ const Events: React.FC<EventsProps> = ({
174187
></Chip>
175188
</Box>
176189
</Box>
190+
<Tooltip title={'Refresh'}>
191+
<IconButton
192+
color={'primary'}
193+
size={'small'}
194+
onClick={() => {
195+
refresh()
196+
}}
197+
>
198+
<Refresh fontSize={'small'} />
199+
</IconButton>
200+
</Tooltip>
177201
</Box>
178202
<Box
179203
p={2}
@@ -202,7 +226,18 @@ const Events: React.FC<EventsProps> = ({
202226
{state.events?.length === 0 ? (
203227
<Box p={2}>
204228
<MqEmpty title={i18next.t('events_route.empty_title')}>
205-
<MqText subdued>{i18next.t('events_route.empty_body')}</MqText>
229+
<>
230+
<MqText subdued>{i18next.t('events_route.empty_body')}</MqText>
231+
<Button
232+
color={'primary'}
233+
size={'small'}
234+
onClick={() => {
235+
refresh()
236+
}}
237+
>
238+
Refresh
239+
</Button>
240+
</>
206241
</MqEmpty>
207242
</Box>
208243
) : (

‎web/src/routes/jobs/Jobs.tsx‎

Lines changed: 47 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
// SPDX-License-Identifier: Apache-2.0
33

44
import * as Redux from 'redux'
5-
import { ChevronLeftRounded, ChevronRightRounded } from '@mui/icons-material'
65
import {
6+
Button,
77
Chip,
88
Container,
99
Table,
@@ -14,6 +14,7 @@ import {
1414
Tooltip,
1515
createTheme,
1616
} from '@mui/material'
17+
import { ChevronLeftRounded, ChevronRightRounded, Refresh } from '@mui/icons-material'
1718
import { IState } from '../../store/reducers'
1819
import { Job } from '../../types/api'
1920
import { MqScreenLoad } from '../../components/core/screen-load/MqScreenLoad'
@@ -26,6 +27,7 @@ import { formatUpdatedAt } from '../../helpers'
2627
import { stopWatchDuration } from '../../helpers/time'
2728
import { useTheme } from '@emotion/react'
2829
import Box from '@mui/material/Box'
30+
import CircularProgress from '@mui/material/CircularProgress/CircularProgress'
2931
import IconButton from '@mui/material/IconButton'
3032
import MqEmpty from '../../components/core/empty/MqEmpty'
3133
import MqStatus from '../../components/core/status/MqStatus'
@@ -94,26 +96,58 @@ const Jobs: React.FC<JobsProps> = ({
9496
const i18next = require('i18next')
9597
return (
9698
<Container maxWidth={'lg'} disableGutters>
97-
<MqScreenLoad loading={isJobsLoading || !isJobsInit}>
99+
<Box p={2} display={'flex'} justifyContent={'space-between'} alignItems={'center'}>
100+
<Box display={'flex'}>
101+
<MqText heading>{i18next.t('jobs_route.heading')}</MqText>
102+
<Chip
103+
size={'small'}
104+
variant={'outlined'}
105+
color={'primary'}
106+
sx={{ marginLeft: 1 }}
107+
label={totalCount + ' total'}
108+
></Chip>
109+
</Box>
110+
<Box display={'flex'} alignItems={'center'}>
111+
{isJobsLoading && <CircularProgress size={16} />}
112+
<Tooltip title={'Refresh'}>
113+
<IconButton
114+
sx={{ ml: 2 }}
115+
color={'primary'}
116+
size={'small'}
117+
onClick={() => {
118+
if (selectedNamespace) {
119+
fetchJobs(selectedNamespace, PAGE_SIZE, state.page * PAGE_SIZE)
120+
}
121+
}}
122+
>
123+
<Refresh fontSize={'small'} />
124+
</IconButton>
125+
</Tooltip>
126+
</Box>
127+
</Box>
128+
<MqScreenLoad loading={isJobsLoading && !isJobsInit}>
98129
<>
99130
{jobs.length === 0 ? (
100131
<Box p={2}>
101132
<MqEmpty title={i18next.t('jobs_route.empty_title')}>
102-
<MqText subdued>{i18next.t('jobs_route.empty_body')}</MqText>
133+
<>
134+
<MqText subdued>{i18next.t('jobs_route.empty_body')}</MqText>
135+
<Button
136+
color={'primary'}
137+
size={'small'}
138+
onClick={() => {
139+
if (selectedNamespace) {
140+
fetchJobs(selectedNamespace, PAGE_SIZE, state.page * PAGE_SIZE)
141+
}
142+
}}
143+
>
144+
Refresh
145+
</Button>
146+
</>
103147
</MqEmpty>
104148
</Box>
105149
) : (
106150
<>
107-
<Box p={2} display={'flex'}>
108-
<MqText heading>{i18next.t('jobs_route.heading')}</MqText>
109-
<Chip
110-
size={'small'}
111-
variant={'outlined'}
112-
color={'primary'}
113-
sx={{ marginLeft: 1 }}
114-
label={totalCount + ' total'}
115-
></Chip>
116-
</Box>
117151
<Table size='small'>
118152
<TableHead>
119153
<TableRow>

0 commit comments

Comments
 (0)
⚡