Skip to content

Commit 276ae77

Browse files
phixMePeter Hickswslulciuc
authored
Adds Created by view for dataset versions along with SQL syntax highlighting. (#1929)
Signed-off-by: Peter Hicks <peter@datakin.com> Co-authored-by: Peter Hicks <peter@datakin.com> Co-authored-by: Willy Lulciuc <willy@datakin.com>
1 parent 1e3110e commit 276ae77

10 files changed

Lines changed: 81 additions & 26 deletions

File tree

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

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

3-
import { THEME_EXTRA } from '../../../helpers/theme'
4-
import { Theme, alpha } from '@material-ui/core/styles'
3+
import { THEME_EXTRA, theme } from '../../../helpers/theme'
4+
import { alpha } from '@material-ui/core/styles'
5+
import { ocean } from 'react-syntax-highlighter/dist/cjs/styles/hljs'
56
import Box from '@material-ui/core/Box'
67
import MqText from '../text/MqText'
78
import React from 'react'
9+
import SyntaxHighlighter from 'react-syntax-highlighter'
810
import createStyles from '@material-ui/core/styles/createStyles'
911
import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles'
1012

11-
const styles = (theme: Theme) =>
12-
createStyles({
13-
codeContainer: {
14-
padding: `${theme.spacing(2)}px ${theme.spacing(4)}px`,
15-
backgroundColor: alpha(theme.palette.common.white, 0.1),
16-
borderLeft: `2px dashed ${THEME_EXTRA.typography.subdued}`,
17-
whiteSpace: 'pre-wrap'
18-
}
19-
})
13+
const styles = () => createStyles({})
2014

2115
interface OwnProps {
2216
code?: string
17+
language?: string
2318
description?: string
2419
}
2520

26-
const MqCode: React.FC<OwnProps & WithStyles<typeof styles>> = ({ code, description, classes }) => {
21+
const MqCode: React.FC<OwnProps & WithStyles<typeof styles>> = ({
22+
code,
23+
description,
24+
language
25+
}) => {
2726
return (
28-
<Box className={classes.codeContainer}>
27+
<Box>
2928
{description && (
3029
<Box mb={2}>
3130
<MqText bold font={'mono'} subdued>
3231
{description}
3332
</MqText>
3433
</Box>
3534
)}
36-
<MqText font={'mono'} subdued>
37-
{code ? code : 'Nothing to show here'}
38-
</MqText>
35+
<SyntaxHighlighter
36+
language={language}
37+
style={ocean}
38+
customStyle={{
39+
backgroundColor: alpha(theme.palette.common.white, 0.1),
40+
borderLeft: `2px dashed ${THEME_EXTRA.typography.subdued}`,
41+
padding: theme.spacing(2)
42+
}}
43+
>
44+
{code ? code : 'No code available'}
45+
</SyntaxHighlighter>
3946
</Box>
4047
)
4148
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ const MqJson: React.FC<OwnProps> = ({ code }) => {
1717
style={ocean}
1818
customStyle={{
1919
backgroundColor: alpha(theme.palette.common.white, 0.1),
20-
borderLeft: `2px dashed ${THEME_EXTRA.typography.subdued}`
20+
borderLeft: `2px dashed ${THEME_EXTRA.typography.subdued}`,
21+
padding: theme.spacing(2)
2122
}}
2223
>
2324
{JSON.stringify(code, null, ' ')}

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,13 @@ const DatasetDetailPage: FunctionComponent<IProps> = props => {
140140
<MqText subdued>{description}</MqText>
141141
</Box>
142142
</Box>
143-
{tab === 0 && <DatasetInfo datasetFields={dataset.fields} facets={dataset.facets} />}
143+
{tab === 0 && (
144+
<DatasetInfo
145+
datasetFields={dataset.fields}
146+
facets={dataset.facets}
147+
run={dataset.createdByRun}
148+
/>
149+
)}
144150
{tab === 1 && <DatasetVersions versions={props.versions} />}
145151
</Box>
146152
)

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

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
11
// SPDX-License-Identifier: Apache-2.0
22

33
import { Box, Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core'
4-
import { Field } from '../../types/api'
4+
import { Field, Run } from '../../types/api'
5+
import { stopWatchDuration } from '../../helpers/time'
6+
import MqCode from '../core/code/MqCode'
57
import MqEmpty from '../core/empty/MqEmpty'
68
import MqJson from '../core/code/MqJson'
79
import MqText from '../core/text/MqText'
810
import React, { FunctionComponent } from 'react'
11+
import RunStatus from '../jobs/RunStatus'
912

1013
const DATASET_COLUMNS = ['Field', 'Type', 'Description']
1114

1215
interface DatasetInfoProps {
1316
datasetFields: Field[]
1417
facets?: object
18+
run?: Run
1519
}
1620

1721
const DatasetInfo: FunctionComponent<DatasetInfoProps> = props => {
18-
const { datasetFields, facets } = props
22+
const { datasetFields, facets, run } = props
1923

2024
if (datasetFields.length === 0) {
2125
return <MqEmpty title={'No Fields'} body={'Try adding dataset fields.'} />
@@ -57,6 +61,24 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = props => {
5761
<MqJson code={facets} />
5862
</Box>
5963
)}
64+
{run && (
65+
<Box mt={2}>
66+
<Box mb={1}>
67+
<Box display={'flex'} alignItems={'center'} justifyContent={'space-between'}>
68+
<Box display={'flex'} alignItems={'center'}>
69+
<RunStatus run={run} />
70+
<MqText subheading>Created by Run</MqText>
71+
</Box>
72+
<Box display={'flex'}>
73+
<MqText bold>Duration:&nbsp;</MqText>
74+
<MqText subdued>{stopWatchDuration(run.durationMs)}</MqText>
75+
</Box>
76+
</Box>
77+
<MqText subdued>{run.jobVersion.name}</MqText>
78+
</Box>
79+
<MqCode code={run.context.sql} language={'sql'} />
80+
</Box>
81+
)}
6082
</Box>
6183
)
6284
}

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

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import DatasetInfo from './DatasetInfo'
1111
import IconButton from '@material-ui/core/IconButton'
1212
import MqText from '../core/text/MqText'
1313
import React, { FunctionComponent, SetStateAction } from 'react'
14+
import RunStatus from '../jobs/RunStatus'
1415
import transitions from '@material-ui/core/styles/transitions'
1516

1617
const styles = (theme: ITheme) => {
@@ -25,7 +26,7 @@ const styles = (theme: ITheme) => {
2526
})
2627
}
2728

28-
const DATASET_VERSIONS_COLUMNS = ['Version', 'Created At', 'Field Count', 'Lifecycle State']
29+
const DATASET_VERSIONS_COLUMNS = ['Version', 'Created At', 'Field Count', 'Dataset Creator (Run)', 'Lifecycle State']
2930

3031
interface DatasetVersionsProps {
3132
versions: DatasetVersion[]
@@ -53,7 +54,11 @@ const DatasetVersions: FunctionComponent<
5354
<ArrowBackIosRounded fontSize={'small'} />
5455
</IconButton>
5556
</Box>
56-
<DatasetInfo datasetFields={infoView.fields} facets={infoView.facets} />
57+
<DatasetInfo
58+
datasetFields={infoView.fields}
59+
facets={infoView.facets}
60+
run={infoView.createdByRun}
61+
/>
5762
</>
5863
)
5964
}
@@ -83,6 +88,18 @@ const DatasetVersions: FunctionComponent<
8388
<TableCell align='left'>{version.version}</TableCell>
8489
<TableCell align='left'>{formatUpdatedAt(version.createdAt)}</TableCell>
8590
<TableCell align='left'>{version.fields.length}</TableCell>
91+
<TableCell align='left'>
92+
<Box display={'flex'} alignItems={'center'}>
93+
{version.createdByRun ? (
94+
<>
95+
<RunStatus run={version.createdByRun} />
96+
{version.createdByRun ? version.createdByRun.id : 'N/A'}
97+
</>
98+
) : (
99+
'N/A'
100+
)}
101+
</Box>
102+
</TableCell>
86103
<TableCell align='left'>{version.lifecycleState}</TableCell>
87104
</TableRow>
88105
)

‎web/src/store/requests/jobs.ts‎

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

33
import { API_URL } from '../../globals'
4-
import { Job, Jobs, Run } from '../../types/api'
4+
import { Jobs } from '../../types/api'
55
import { genericFetchWrapper } from './index'
66

77
export const getJobs = async (namespace: string, limit = 2000, offset = 0) => {

‎web/src/store/requests/lineage.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
import { API_URL } from '../../globals'
44
import { JobOrDataset } from '../../components/lineage/types'
5-
import { LineageGraph } from '../../types/api'
65
import { generateNodeId } from '../../helpers/nodes'
76
import { genericFetchWrapper } from './index'
87

‎web/src/store/requests/namespaces.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
// SPDX-License-Identifier: Apache-2.0
22

33
import { API_URL } from '../../globals'
4-
import { Namespaces } from '../../types/api'
54
import { genericFetchWrapper } from './index'
65

76
export const getNamespaces = async () => {

‎web/src/store/requests/search.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
// SPDX-License-Identifier: Apache-2.0
22

33
import { API_URL } from '../../globals'
4-
import { Search } from '../../types/api'
54
import { genericFetchWrapper } from './index'
65

76
export const getSearch = async (q: string, filter = 'ALL', sort = 'NAME', limit = 100) => {

‎web/src/types/api.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,11 @@ export interface Run {
127127
nominalStartTime: string
128128
nominalEndTime: string
129129
state: RunState
130+
jobVersion: {
131+
name: string
132+
namespace: string
133+
version: string
134+
}
130135
startedAt: string
131136
endedAt: string
132137
durationMs: number

0 commit comments

Comments
 (0)
⚡