Skip to content

Commit d0a4207

Browse files
phixMephix
phixMe
and
phix
authored
Web: Refine panel feature set (#2798)
* Visual tweaks for truncating tables and other misc display improvements. * Fix loading state issue. * Refinements * Adding meta info for tab view. * Job detail page update. * Fixing icon. * Fixing accidental change. * Minor updates for styling. * Fixing test. * Minor style changes. * Fixing multi tag change. --------- Co-authored-by: phix <peter.hicks@astronomer.io>
1 parent ac23c1b commit d0a4207

13 files changed

Lines changed: 242 additions & 263 deletions

File tree

‎web/src/components/core/code/MqCode.tsx‎

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

44
import { THEME_EXTRA } from '../../../helpers/theme'
5-
import { ocean } from 'react-syntax-highlighter/dist/cjs/styles/hljs'
5+
import { solarizedDark } from 'react-syntax-highlighter/dist/cjs/styles/hljs'
66
import Box from '@mui/material/Box'
77
import MqText from '../text/MqText'
88
import React from 'react'
@@ -26,7 +26,7 @@ const MqCode: React.FC<OwnProps> = ({ code, description, language }) => {
2626
)}
2727
<SyntaxHighlighter
2828
language={language}
29-
style={ocean}
29+
style={solarizedDark}
3030
customStyle={{
3131
backgroundColor: '#191f26',
3232
borderLeft: `2px dashed ${THEME_EXTRA.typography.subdued}`,

‎web/src/components/core/info/MqInfo.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// Copyright 2018-2023 contributors to the Marquez project
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
import Box from '@mui/material/Box'
5+
import MqText from '../text/MqText'
6+
import React, { ReactElement } from 'react'
7+
8+
interface MqInfoProps {
9+
icon: ReactElement
10+
label: string
11+
value: ReactElement | string | number
12+
}
13+
14+
export const MqInfo: React.FC<MqInfoProps> = ({ icon, label, value }) => {
15+
return (
16+
<Box>
17+
<Box display={'flex'} alignItems={'center'} mb={1}>
18+
{icon}
19+
<Box ml={1}>
20+
<MqText subdued>{label}</MqText>
21+
</Box>
22+
</Box>
23+
<Box display={'flex'} alignItems={'center'}>
24+
<MqText bold>{value}</MqText>
25+
</Box>
26+
</Box>
27+
)
28+
}

‎web/src/components/core/screen-load/MqScreenLoad.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// SPDX-License-Identifier: Apache-2.0
33

44
import { HEADER_HEIGHT } from '../../../helpers/theme'
5-
import Box from '@mui/material/Box/Box'
5+
import Box from '@mui/material/Box'
66
import CircularProgress from '@mui/material/CircularProgress/CircularProgress'
77
import React, { ReactElement } from 'react'
88

‎web/src/components/datasets/DatasetDetailPage.tsx‎

Lines changed: 91 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,23 @@
22
// SPDX-License-Identifier: Apache-2.0
33

44
import * as Redux from 'redux'
5-
import { Box, Button, Switch, Tab, Tabs, createTheme } from '@mui/material'
5+
import {
6+
Box,
7+
Button,
8+
Divider,
9+
FormControlLabel,
10+
Grid,
11+
Switch,
12+
Tab,
13+
Tabs,
14+
createTheme,
15+
} from '@mui/material'
16+
import { CalendarIcon } from '@mui/x-date-pickers'
617
import { CircularProgress } from '@mui/material'
718
import { DatasetVersion } from '../../types/api'
819
import { IState } from '../../store/reducers'
920
import { LineageDataset } from '../lineage/types'
21+
import { MqInfo } from '../core/info/MqInfo'
1022
import { alpha } from '@mui/material/styles'
1123
import { bindActionCreators } from 'redux'
1224
import { connect } from 'react-redux'
@@ -19,19 +31,20 @@ import {
1931
resetDatasetVersions,
2032
setTabIndex,
2133
} from '../../store/actionCreators'
34+
import { formatUpdatedAt } from '../../helpers'
2235
import { useNavigate, useSearchParams } from 'react-router-dom'
2336
import { useTheme } from '@emotion/react'
2437
import CloseIcon from '@mui/icons-material/Close'
25-
import DatasetColumnLineage from './DatasetColumnLineage'
2638
import DatasetInfo from './DatasetInfo'
2739
import DatasetTags from './DatasetTags'
2840
import DatasetVersions from './DatasetVersions'
2941
import Dialog from '../Dialog'
3042
import IconButton from '@mui/material/IconButton'
31-
import Io from '../io/Io'
43+
import ListIcon from '@mui/icons-material/List'
3244
import MqStatus from '../core/status/MqStatus'
3345
import MqText from '../core/text/MqText'
3446
import React, { ChangeEvent, FunctionComponent, useEffect, useState } from 'react'
47+
import StorageIcon from '@mui/icons-material/Storage'
3548

3649
interface StateProps {
3750
lineageDataset: LineageDataset
@@ -95,7 +108,7 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
95108
}, [lineageDataset.name])
96109

97110
useEffect(() => {
98-
if (showTags === true) {
111+
if (showTags) {
99112
fetchDatasetVersions(lineageDataset.namespace, lineageDataset.name)
100113
}
101114
}, [showTags])
@@ -111,9 +124,9 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
111124
setTabIndex(newValue)
112125
}
113126

114-
if (versionsLoading) {
127+
if (versionsLoading && versions.length === 0) {
115128
return (
116-
<Box display={'flex'} justifyContent={'center'}>
129+
<Box display={'flex'} justifyContent={'center'} mt={2}>
117130
<CircularProgress color='primary' />
118131
</Box>
119132
)
@@ -145,6 +158,7 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
145158
<Box mr={1}>
146159
<Button
147160
variant='outlined'
161+
size={'small'}
148162
sx={{
149163
borderColor: theme.palette.error.main,
150164
color: theme.palette.error.main,
@@ -174,55 +188,86 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
174188
</IconButton>
175189
</Box>
176190
</Box>
177-
<Box display={'flex'} justifyContent={'space-between'} mb={2}>
178-
<Box sx={{ borderBottom: 1, borderColor: 'divider', width: '100%' }}>
179-
<Tabs
180-
value={tabIndex}
181-
onChange={handleChange}
182-
textColor='primary'
183-
indicatorColor='primary'
184-
>
185-
<Tab
186-
label={i18next.t('datasets.latest_tab')}
187-
{...a11yProps(0)}
188-
disableRipple={true}
189-
/>
190-
<Tab label={'I/O'} {...a11yProps(1)} disableRipple={true} />
191-
<Tab
192-
label={i18next.t('datasets.history_tab')}
193-
{...a11yProps(2)}
194-
disableRipple={true}
195-
/>
196-
<Tab
197-
label={i18next.t('datasets.column_lineage_tab')}
198-
{...a11yProps(3)}
199-
disableRipple={true}
200-
/>
201-
</Tabs>
202-
</Box>
203-
</Box>
204-
<Box display={'flex'} alignItems={'center'} justifyContent={'space-between'}>
191+
<Box display={'flex'} alignItems={'center'} justifyContent={'space-between'} my={2}>
205192
{facetsStatus && (
206193
<Box mr={1}>
207194
<MqStatus label={'Quality'} color={facetsStatus} />
208195
</Box>
209196
)}
210-
<MqText heading font={'mono'}>
211-
{name}
212-
</MqText>
213-
<Box ml={1} display={'flex'} alignItems={'center'}>
214-
<MqText subheading>{i18next.t('datasets.show_field_tags')}</MqText>
215-
<Switch
216-
checked={showTags}
217-
onChange={() => setShowTags(!showTags)}
218-
inputProps={{ 'aria-label': 'toggle show tags' }}
219-
/>
197+
<Box display={'flex'} alignItems={'center'}>
198+
<MqText heading font={'mono'}>
199+
{name}
200+
</MqText>
201+
<Box ml={1}>
202+
<MqText
203+
small
204+
link
205+
linkTo={`/datasets/column-level/${encodeURIComponent(
206+
encodeURIComponent(firstVersion.id.namespace)
207+
)}/${encodeURIComponent(firstVersion.id.name)}`}
208+
>
209+
COLUMN LEVEL
210+
</MqText>
211+
</Box>
220212
</Box>
213+
{tabIndex === 0 && (
214+
<Box ml={1} display={'flex'} alignItems={'center'}>
215+
<FormControlLabel
216+
control={
217+
<Switch
218+
size={'small'}
219+
checked={showTags}
220+
onChange={() => setShowTags(!showTags)}
221+
inputProps={{ 'aria-label': 'toggle show tags' }}
222+
/>
223+
}
224+
label={i18next.t('datasets.show_field_tags')}
225+
/>
226+
</Box>
227+
)}
221228
</Box>
222-
<Box mb={2}>
229+
<Box>
223230
<MqText subdued>{description}</MqText>
224231
</Box>
225232
</Box>
233+
<Divider sx={{ my: 1 }} />
234+
<Grid container spacing={2}>
235+
<Grid item xs={4}>
236+
<MqInfo
237+
icon={<CalendarIcon color={'disabled'} />}
238+
label={'Updated at'}
239+
value={formatUpdatedAt(firstVersion.createdAt)}
240+
/>
241+
</Grid>
242+
<Grid item xs={4}>
243+
<MqInfo
244+
icon={<StorageIcon color={'disabled'} />}
245+
label={'Dataset Type'}
246+
value={firstVersion.type}
247+
/>
248+
</Grid>
249+
<Grid item xs={4}>
250+
<MqInfo
251+
icon={<ListIcon color={'disabled'} />}
252+
label={'Fields'}
253+
value={`${firstVersion.fields.length} columns`}
254+
/>
255+
</Grid>
256+
</Grid>
257+
<Divider sx={{ mt: 1 }} />
258+
<Box display={'flex'} justifyContent={'space-between'} mb={2}>
259+
<Box sx={{ borderBottom: 1, borderColor: 'divider', width: '100%' }}>
260+
<Tabs
261+
value={tabIndex}
262+
onChange={handleChange}
263+
textColor='primary'
264+
indicatorColor='primary'
265+
>
266+
<Tab label={i18next.t('datasets.latest_tab')} {...a11yProps(0)} disableRipple={true} />
267+
<Tab label={i18next.t('datasets.history_tab')} {...a11yProps(2)} disableRipple={true} />
268+
</Tabs>
269+
</Box>
270+
</Box>
226271
{tabIndex === 0 && (
227272
<DatasetInfo
228273
datasetFields={firstVersion.fields}
@@ -231,9 +276,7 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
231276
showTags={showTags}
232277
/>
233278
)}
234-
{tabIndex === 1 && <Io />}
235-
{tabIndex === 2 && <DatasetVersions versions={props.versions} />}
236-
{tabIndex === 3 && <DatasetColumnLineage lineageDataset={props.lineageDataset} />}
279+
{tabIndex === 1 && <DatasetVersions versions={props.versions} />}
237280
</Box>
238281
)
239282
}

‎web/src/components/datasets/DatasetInfo.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Copyright 2018-2024 contributors to the Marquez project
22
// SPDX-License-Identifier: Apache-2.0
33
import * as Redux from 'redux'
4-
import { Box, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material'
4+
import { Box, Chip, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material'
55
import { Field, Run } from '../../types/api'
66
import { IState } from '../../store/reducers'
77
import { connect, useSelector } from 'react-redux'
@@ -101,9 +101,13 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = (props) => {
101101
{datasetFields.map((field) => {
102102
return (
103103
<React.Fragment key={field.name}>
104-
<TableRow sx={{ cursor: 'pointer' }}>
104+
<TableRow>
105105
<TableCell align='left'>{field.name}</TableCell>
106-
{!showTags && <TableCell align='left'>{field.type}</TableCell>}
106+
{!showTags && (
107+
<TableCell align='left'>
108+
<Chip size={'small'} label={field.type} variant={'outlined'} />
109+
</TableCell>
110+
)}
107111
{!showTags && (
108112
<TableCell align='left'>{field.description || 'no description'}</TableCell>
109113
)}

‎web/src/components/datasets/DatasetTags.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -103,12 +103,17 @@ const DatasetTags: React.FC<IProps> = (props) => {
103103
_reason: AutocompleteChangeReason,
104104
details?: AutocompleteChangeDetails<string> | undefined
105105
) => {
106-
107-
if (details) {
106+
if (details && _reason === 'removeOption') {
107+
const newTag = details.option
108+
const newSelectedTags = selectedTags.filter((tag) => newTag !== tag)
109+
setSelectedTags(newSelectedTags)
110+
datasetField
111+
? deleteDatasetFieldTag(namespace, datasetName, newTag, datasetField)
112+
: deleteDatasetTag(namespace, datasetName, newTag)
113+
} else if (details && !selectedTags.includes(details.option)) {
108114
const newTag = details.option
109115
const newSelectedTags = [...selectedTags, newTag]
110116
setSelectedTags(newSelectedTags)
111-
112117
datasetField
113118
? addDatasetFieldTag(namespace, datasetName, newTag, datasetField)
114119
: addDatasetTag(namespace, datasetName, newTag)
@@ -117,7 +122,7 @@ const DatasetTags: React.FC<IProps> = (props) => {
117122

118123
const handleDelete = (deletedTag: string) => {
119124
const newSelectedTags = selectedTags.filter((tag) => deletedTag !== tag)
120-
125+
121126
setSelectedTags(newSelectedTags)
122127

123128
datasetField
@@ -172,8 +177,8 @@ const DatasetTags: React.FC<IProps> = (props) => {
172177
variant='outlined'
173178
onClick={handleButtonClick}
174179
color='primary'
175-
size='medium'
176180
sx={{ marginRight: '8px' }}
181+
style={{ paddingTop: '6.75px', paddingBottom: '6.75px' }}
177182
startIcon={<LocalOfferIcon />}
178183
>
179184
Edit Tag
@@ -214,7 +219,7 @@ const DatasetTags: React.FC<IProps> = (props) => {
214219
<TextField
215220
variant={!datasetField ? 'outlined' : 'standard'}
216221
{...params}
217-
placeholder={selectedTags.length > 0 ? '' : 'Add some Tags.'}
222+
placeholder={selectedTags.length > 0 ? '' : 'Search Tags'}
218223
InputProps={{
219224
...params.InputProps,
220225
...(datasetField ? { disableUnderline: true } : {}),
@@ -228,6 +233,9 @@ const DatasetTags: React.FC<IProps> = (props) => {
228233
/>
229234
</Box>
230235
<Dialog
236+
PaperProps={{
237+
sx: { backgroundColor: theme.palette.background.default, backgroundImage: 'none' },
238+
}}
231239
open={openTagDesc}
232240
fullWidth
233241
maxWidth='sm'

0 commit comments

Comments
 (0)
⚡