Web: Data Quality

web/src/components/core/copy/MqCopy.tsx

@@ -1,9 +1,10 @@
 // Copyright 2018-2023 contributors to the Marquez project
 // SPDX-License-Identifier: Apache-2.0
 
-import { Snackbar, Tooltip } from '@mui/material'
+import { Snackbar } from '@mui/material'
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import IconButton from '@mui/material/IconButton'
+import MQTooltip from '../tooltip/MQTooltip'
 import React from 'react'
 
 interface MqCopyProps {
@@ -21,7 +22,7 @@ const MqEmpty: React.FC<MqCopyProps> = ({ string }) => {
   }
   return (
     <>
-      <Tooltip title='Copy'>
+      <MQTooltip title='Copy'>
         <IconButton
           onClick={(event) => {
             event.stopPropagation()
@@ -34,7 +35,7 @@ const MqEmpty: React.FC<MqCopyProps> = ({ string }) => {
         >
           <ContentCopyIcon fontSize={'small'} />
         </IconButton>
-      </Tooltip>
+      </MQTooltip>
       <Snackbar
         open={open}
         autoHideDuration={2000}

web/src/components/core/date-picker/MqDatePicker.tsx

@@ -27,6 +27,13 @@ const MqDatePicker: React.FC<DatePickerProps> = ({
   return (
     <DateTimePicker
       label={label}
+      slotProps={{
+        desktopPaper: {
+          sx: {
+            backgroundImage: 'none',
+          },
+        },
+      }}
       sx={{
         label: {
           left: theme.spacing(2),

web/src/components/datasets/Assertions.tsx

@@ -0,0 +1,62 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import { Assertion } from '../../types/api'
+import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material'
+import { theme } from '../../helpers/theme'
+import MqStatus from '../core/status/MqStatus'
+import MqText from '../core/text/MqText'
+import React from 'react'
+
+interface OwnProps {
+  assertions: Assertion[]
+}
+
+const Assertions: React.FC<OwnProps> = ({ assertions }) => {
+  if (assertions.length === 0) {
+    return null
+  }
+  return (
+    <Table size={'small'}>
+      <TableHead>
+        <TableRow>
+          <TableCell>
+            <MqText bold>COLUMN</MqText>
+          </TableCell>
+          <TableCell>
+            <MqText bold>ASSERTION</MqText>
+          </TableCell>
+          <TableCell>
+            <MqText bold>STATUS</MqText>
+          </TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {assertions.map((assertion, index) => {
+          const sx = index === assertions.length - 1 ? { borderBottom: 'none' } : {}
+          return (
+            <TableRow key={`${assertion.column}-${assertion.assertion}`}>
+              <TableCell sx={sx}>
+                <MqText font={'mono'}>{assertion.column}</MqText>
+              </TableCell>
+              <TableCell sx={sx}>
+                <MqText subdued>{assertion.assertion}</MqText>
+              </TableCell>
+              <TableCell sx={sx}>
+                {
+                  <MqStatus
+                    label={assertion.success ? 'pass'.toUpperCase() : 'fail'.toUpperCase()}
+                    color={
+                      assertion.success ? theme.palette.primary.main : theme.palette.error.main
+                    }
+                  ></MqStatus>
+                }
+              </TableCell>
+            </TableRow>
+          )
+        })}
+      </TableBody>
+    </Table>
+  )
+}
+
+export default Assertions

web/src/components/datasets/DatasetDetailPage.tsx

@@ -23,7 +23,7 @@ import { MqInfo } from '../core/info/MqInfo'
 import { alpha } from '@mui/material/styles'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { datasetFacetsStatus } from '../../helpers/nodes'
+import { datasetFacetsQualityAssertions, datasetFacetsStatus } from '../../helpers/nodes'
 import {
   deleteDataset,
   dialogToggle,
@@ -38,16 +38,19 @@ import { formatUpdatedAt } from '../../helpers'
 import { truncateText } from '../../helpers/text'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { useTheme } from '@emotion/react'
+import Assertions from './Assertions'
 import CloseIcon from '@mui/icons-material/Close'
 import DatasetInfo from './DatasetInfo'
 import DatasetTags from './DatasetTags'
 import DatasetVersions from './DatasetVersions'
 import Dialog from '../Dialog'
 import IconButton from '@mui/material/IconButton'
 import ListIcon from '@mui/icons-material/List'
+import MQTooltip from '../core/tooltip/MQTooltip'
 import MqStatus from '../core/status/MqStatus'
 import MqText from '../core/text/MqText'
 import React, { ChangeEvent, FunctionComponent, useEffect, useState } from 'react'
+import RuleIcon from '@mui/icons-material/Rule'
 import StorageIcon from '@mui/icons-material/Storage'
 
 interface StateProps {
@@ -143,6 +146,8 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
   const { name, tags, description } = firstVersion
   const facetsStatus = datasetFacetsStatus(firstVersion.facets)
 
+  const assertions = datasetFacetsQualityAssertions(firstVersion.facets)
+
   return (
     <Box px={2}>
       <Box
@@ -155,11 +160,6 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
         mb={2}
       >
         <Box display={'flex'} alignItems={'center'} justifyContent={'space-between'} pb={2}>
-          {facetsStatus && (
-            <Box mr={1}>
-              <MqStatus label={'Quality'} color={facetsStatus} />
-            </Box>
-          )}
           <Box display={'flex'} alignItems={'center'}>
             <Box>
               <Box display={'flex'} alignItems={'center'}>
@@ -224,27 +224,74 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
         </Box>
       </Box>
       <Grid container spacing={2}>
-        <Grid item xs={4}>
+        <Grid item xs={6}>
           <MqInfo
             icon={<CalendarIcon color={'disabled'} />}
             label={'Updated at'.toUpperCase()}
             value={formatUpdatedAt(firstVersion.createdAt)}
           />
         </Grid>
-        <Grid item xs={4}>
+        <Grid item xs={6}>
           <MqInfo
             icon={<StorageIcon color={'disabled'} />}
             label={'Dataset Type'.toUpperCase()}
             value={<MqText font={'mono'}>{firstVersion.type}</MqText>}
           />
         </Grid>
-        <Grid item xs={4}>
+        <Grid item xs={6}>
           <MqInfo
             icon={<ListIcon color={'disabled'} />}
             label={'Fields'.toUpperCase()}
             value={`${firstVersion.fields.length} columns`}
           />
         </Grid>
+        <Grid item xs={6}>
+          <MqInfo
+            icon={<RuleIcon color={'disabled'} />}
+            label={'Quality/Asserions'.toUpperCase()}
+            value={
+              facetsStatus ? (
+                <Box display={'flex'}>
+                  <MQTooltip
+                    title={
+                      <Assertions
+                        assertions={assertions.filter((assertion) => assertion.success)}
+                      />
+                    }
+                  >
+                    <Box>
+                      <MqStatus
+                        label={`${
+                          assertions.filter((assertion) => assertion.success).length
+                        } Passing`.toUpperCase()}
+                        color={theme.palette.primary.main}
+                      />
+                    </Box>
+                  </MQTooltip>
+                  <Divider sx={{ mx: 1 }} orientation={'vertical'} />
+                  <MQTooltip
+                    title={
+                      <Assertions
+                        assertions={assertions.filter((assertion) => !assertion.success)}
+                      />
+                    }
+                  >
+                    <Box>
+                      <MqStatus
+                        label={`${
+                          assertions.filter((assertion) => !assertion.success).length
+                        } Failing`.toUpperCase()}
+                        color={theme.palette.error.main}
+                      />
+                    </Box>
+                  </MQTooltip>
+                </Box>
+              ) : (
+                <MqStatus label={'N/A'} color={theme.palette.secondary.main} />
+              )
+            }
+          />
+        </Grid>
       </Grid>
       <Divider sx={{ my: 2 }} />
       <Box display={'flex'} justifyContent={'space-between'} alignItems={'center'}>

web/src/components/jobs/Runs.tsx

@@ -25,7 +25,6 @@ import MqStatus from '../core/status/MqStatus'
 import MqText from '../core/text/MqText'
 import React, { FunctionComponent, SetStateAction } from 'react'
 import RunInfo from './RunInfo'
-import RunStatus from './RunStatus'
 
 interface RunsProps {
   runs: Run[]
@@ -139,10 +138,7 @@ const Runs: FunctionComponent<RunsProps> = (props) => {
               >
                 <TableCell align='left'>{run.id}</TableCell>
                 <TableCell align='left'>
-                  <Box display={'flex'} alignItems={'center'}>
-                    <RunStatus run={run} />
-                    <MqText>{run.state}</MqText>
-                  </Box>
+                  <MqStatus color={runStateColor(run.state)} label={run.state} />
                 </TableCell>
                 <TableCell align='left'>{formatUpdatedAt(run.createdAt)}</TableCell>
                 <TableCell align='left'>{formatUpdatedAt(run.startedAt)}</TableCell>

web/src/components/namespace-select/NamespaceSelect.tsx

@@ -59,6 +59,15 @@ const NamespaceSelect: React.FC<NamespaceSelectProps> = ({
           </MqText>
         </Box>
         <Select
+          inputProps={{
+            MenuProps: {
+              PaperProps: {
+                sx: {
+                  backgroundImage: 'none',
+                },
+              },
+            },
+          }}
           labelId='namespace-label'
           id='namespace-select'
           value={selectedNamespace}

web/src/helpers/nodes.ts

@@ -107,6 +107,12 @@ export function jobRunsStatus(runs: Run[], limit = 14) {
     return theme.palette.primary.main as string
   }
 }
+export function datasetFacetsQualityAssertions(facets: DataQualityFacets) {
+  const assertions = facets?.dataQualityAssertions?.assertions
+  if (!assertions) {
+    return []
+  } else return assertions
+}
 
 export function datasetFacetsStatus(facets: DataQualityFacets, limit = 14) {
   const assertions = facets?.dataQualityAssertions?.assertions?.slice(-limit)

web/src/helpers/theme.ts

@@ -1,7 +1,7 @@
 // Copyright 2018-2023 contributors to the Marquez project
 // SPDX-License-Identifier: Apache-2.0
 
-import { createTheme } from '@mui/material'
+import { createTheme, darken } from '@mui/material'
 
 export const theme = createTheme({
   components: {
@@ -47,6 +47,7 @@ export const theme = createTheme({
     },
     background: {
       default: '#191f26',
+      paper: darken('#191f26', 0.1),
     },
     secondary: {
       main: '#454f5b',

web/src/routes/column-level/ColumnLevelDrawer.tsx

@@ -3,18 +3,20 @@ import { Box } from '@mui/system'
 import {
   Chip,
   CircularProgress,
-  Divider,
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableRow,
 } from '@mui/material'
 import { ColumnLineageGraph, Dataset } from '../../types/api'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IState } from '../../store/reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
+import { faDatabase } from '@fortawesome/free-solid-svg-icons'
 import { fetchDataset } from '../../store/actionCreators'
+import { theme } from '../../helpers/theme'
 import { useSearchParams } from 'react-router-dom'
 import CloseIcon from '@mui/icons-material/Close'
 import IconButton from '@mui/material/IconButton'
@@ -55,17 +57,47 @@ const ColumnLevelDrawer = ({
 
   return (
     <Box width={`${WIDTH}px`}>
-      <Box p={2} display={'flex'} justifyContent={'space-between'} alignItems={'center'}>
-        <MqText heading>{searchParams.get('dataset')}</MqText>
-        <IconButton
-          onClick={() => {
-            setSearchParams({})
-          }}
-        >
-          <CloseIcon />
-        </IconButton>
+      <Box
+        position={'sticky'}
+        top={'98px'}
+        bgcolor={theme.palette.background.default}
+        pt={2}
+        zIndex={theme.zIndex.appBar}
+        sx={{ borderBottom: 1, borderColor: 'divider', width: '100%' }}
+      >
+        <Box px={2} pb={2} display={'flex'} justifyContent={'space-between'} alignItems={'center'}>
+          <Box display={'flex'} alignItems={'center'}>
+            <Box display={'flex'} alignItems={'center'}>
+              <Box
+                mr={2}
+                borderRadius={theme.spacing(1)}
+                p={1}
+                width={32}
+                height={32}
+                display={'flex'}
+                bgcolor={theme.palette.info.main}
+              >
+                <FontAwesomeIcon
+                  aria-hidden={'true'}
+                  title={'Dataset'}
+                  icon={faDatabase}
+                  width={16}
+                  height={16}
+                  color={theme.palette.common.white}
+                />
+              </Box>
+            </Box>
+            <MqText heading>{searchParams.get('dataset')}</MqText>
+          </Box>
+          <IconButton
+            onClick={() => {
+              setSearchParams({})
+            }}
+          >
+            <CloseIcon fontSize={'small'} />
+          </IconButton>
+        </Box>
       </Box>
-      <Divider />
       {!dataset || isDatasetLoading ? (
         <Box mt={2} display={'flex'} justifyContent={'center'}>
           <CircularProgress color='primary' />