Web: Created by view for dataset versions

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

@@ -1,41 +1,48 @@
 // SPDX-License-Identifier: Apache-2.0
 
-import { THEME_EXTRA } from '../../../helpers/theme'
-import { Theme, alpha } from '@material-ui/core/styles'
+import { THEME_EXTRA, theme } from '../../../helpers/theme'
+import { alpha } from '@material-ui/core/styles'
+import { ocean } from 'react-syntax-highlighter/dist/cjs/styles/hljs'
 import Box from '@material-ui/core/Box'
 import MqText from '../text/MqText'
 import React from 'react'
+import SyntaxHighlighter from 'react-syntax-highlighter'
 import createStyles from '@material-ui/core/styles/createStyles'
 import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles'
 
-const styles = (theme: Theme) =>
-  createStyles({
-    codeContainer: {
-      padding: `${theme.spacing(2)}px ${theme.spacing(4)}px`,
-      backgroundColor: alpha(theme.palette.common.white, 0.1),
-      borderLeft: `2px dashed ${THEME_EXTRA.typography.subdued}`,
-      whiteSpace: 'pre-wrap'
-    }
-  })
+const styles = () => createStyles({})
 
 interface OwnProps {
   code?: string
+  language?: string
   description?: string
 }
 
-const MqCode: React.FC<OwnProps & WithStyles<typeof styles>> = ({ code, description, classes }) => {
+const MqCode: React.FC<OwnProps & WithStyles<typeof styles>> = ({
+  code,
+  description,
+  language
+}) => {
   return (
-    <Box className={classes.codeContainer}>
+    <Box>
       {description && (
         <Box mb={2}>
           <MqText bold font={'mono'} subdued>
             {description}
           </MqText>
         </Box>
       )}
-      <MqText font={'mono'} subdued>
-        {code ? code : 'Nothing to show here'}
-      </MqText>
+      <SyntaxHighlighter
+        language={language}
+        style={ocean}
+        customStyle={{
+          backgroundColor: alpha(theme.palette.common.white, 0.1),
+          borderLeft: `2px dashed ${THEME_EXTRA.typography.subdued}`,
+          padding: theme.spacing(2)
+        }}
+      >
+        {code ? code : 'No code available'}
+      </SyntaxHighlighter>
     </Box>
   )
 }

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

@@ -17,7 +17,8 @@ const MqJson: React.FC<OwnProps> = ({ code }) => {
       style={ocean}
       customStyle={{
         backgroundColor: alpha(theme.palette.common.white, 0.1),
-        borderLeft: `2px dashed ${THEME_EXTRA.typography.subdued}`
+        borderLeft: `2px dashed ${THEME_EXTRA.typography.subdued}`,
+        padding: theme.spacing(2)
       }}
     >
       {JSON.stringify(code, null, '  ')}

web/src/components/datasets/DatasetDetailPage.tsx

@@ -140,7 +140,13 @@ const DatasetDetailPage: FunctionComponent<IProps> = props => {
           <MqText subdued>{description}</MqText>
         </Box>
       </Box>
-      {tab === 0 && <DatasetInfo datasetFields={dataset.fields} facets={dataset.facets} />}
+      {tab === 0 && (
+        <DatasetInfo
+          datasetFields={dataset.fields}
+          facets={dataset.facets}
+          run={dataset.createdByRun}
+        />
+      )}
       {tab === 1 && <DatasetVersions versions={props.versions} />}
     </Box>
   )

web/src/components/datasets/DatasetInfo.tsx

@@ -1,21 +1,25 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Box, Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core'
-import { Field } from '../../types/api'
+import { Field, Run } from '../../types/api'
+import { stopWatchDuration } from '../../helpers/time'
+import MqCode from '../core/code/MqCode'
 import MqEmpty from '../core/empty/MqEmpty'
 import MqJson from '../core/code/MqJson'
 import MqText from '../core/text/MqText'
 import React, { FunctionComponent } from 'react'
+import RunStatus from '../jobs/RunStatus'
 
 const DATASET_COLUMNS = ['Field', 'Type', 'Description']
 
 interface DatasetInfoProps {
   datasetFields: Field[]
   facets?: object
+  run?: Run
 }
 
 const DatasetInfo: FunctionComponent<DatasetInfoProps> = props => {
-  const { datasetFields, facets } = props
+  const { datasetFields, facets, run } = props
 
   if (datasetFields.length === 0) {
     return <MqEmpty title={'No Fields'} body={'Try adding dataset fields.'} />
@@ -57,6 +61,24 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = props => {
           <MqJson code={facets} />
         </Box>
       )}
+      {run && (
+        <Box mt={2}>
+          <Box mb={1}>
+            <Box display={'flex'} alignItems={'center'} justifyContent={'space-between'}>
+              <Box display={'flex'} alignItems={'center'}>
+                <RunStatus run={run} />
+                <MqText subheading>Created by Run</MqText>
+              </Box>
+              <Box display={'flex'}>
+                <MqText bold>Duration:&nbsp;</MqText>
+                <MqText subdued>{stopWatchDuration(run.durationMs)}</MqText>
+              </Box>
+            </Box>
+            <MqText subdued>{run.jobVersion.name}</MqText>
+          </Box>
+          <MqCode code={run.context.sql} language={'sql'} />
+        </Box>
+      )}
     </Box>
   )
 }

web/src/components/datasets/DatasetVersions.tsx

@@ -11,6 +11,7 @@ import DatasetInfo from './DatasetInfo'
 import IconButton from '@material-ui/core/IconButton'
 import MqText from '../core/text/MqText'
 import React, { FunctionComponent, SetStateAction } from 'react'
+import RunStatus from '../jobs/RunStatus'
 import transitions from '@material-ui/core/styles/transitions'
 
 const styles = (theme: ITheme) => {
@@ -25,7 +26,7 @@ const styles = (theme: ITheme) => {
   })
 }
 
-const DATASET_VERSIONS_COLUMNS = ['Version', 'Created At', 'Field Count', 'Lifecycle State']
+const DATASET_VERSIONS_COLUMNS = ['Version', 'Created At', 'Field Count', 'Dataset Creator (Run)', 'Lifecycle State']
 
 interface DatasetVersionsProps {
   versions: DatasetVersion[]
@@ -53,7 +54,11 @@ const DatasetVersions: FunctionComponent<
             <ArrowBackIosRounded fontSize={'small'} />
           </IconButton>
         </Box>
-        <DatasetInfo datasetFields={infoView.fields} facets={infoView.facets} />
+        <DatasetInfo
+          datasetFields={infoView.fields}
+          facets={infoView.facets}
+          run={infoView.createdByRun}
+        />
       </>
     )
   }
@@ -83,6 +88,18 @@ const DatasetVersions: FunctionComponent<
               <TableCell align='left'>{version.version}</TableCell>
               <TableCell align='left'>{formatUpdatedAt(version.createdAt)}</TableCell>
               <TableCell align='left'>{version.fields.length}</TableCell>
+              <TableCell align='left'>
+                <Box display={'flex'} alignItems={'center'}>
+                  {version.createdByRun ? (
+                    <>
+                      <RunStatus run={version.createdByRun} />
+                      {version.createdByRun ? version.createdByRun.id : 'N/A'}
+                    </>
+                  ) : (
+                    'N/A'
+                  )}
+                </Box>
+              </TableCell>
               <TableCell align='left'>{version.lifecycleState}</TableCell>
             </TableRow>
           )

web/src/store/requests/jobs.ts

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { API_URL } from '../../globals'
-import { Job, Jobs, Run } from '../../types/api'
+import { Jobs } from '../../types/api'
 import { genericFetchWrapper } from './index'
 
 export const getJobs = async (namespace: string, limit = 2000, offset = 0) => {

web/src/store/requests/lineage.ts

@@ -2,7 +2,6 @@
 
 import { API_URL } from '../../globals'
 import { JobOrDataset } from '../../components/lineage/types'
-import { LineageGraph } from '../../types/api'
 import { generateNodeId } from '../../helpers/nodes'
 import { genericFetchWrapper } from './index'
 

web/src/store/requests/namespaces.ts

@@ -1,7 +1,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { API_URL } from '../../globals'
-import { Namespaces } from '../../types/api'
 import { genericFetchWrapper } from './index'
 
 export const getNamespaces = async () => {

web/src/store/requests/search.ts

@@ -1,7 +1,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { API_URL } from '../../globals'
-import { Search } from '../../types/api'
 import { genericFetchWrapper } from './index'
 
 export const getSearch = async (q: string, filter = 'ALL', sort = 'NAME', limit = 100) => {

web/src/types/api.ts

@@ -127,6 +127,11 @@ export interface Run {
   nominalStartTime: string
   nominalEndTime: string
   state: RunState
+  jobVersion: {
+    name: string
+    namespace: string
+    version: string
+  }
   startedAt: string
   endedAt: string
   durationMs: number