New Dashboard

web/package.json

@@ -24,8 +24,10 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@lagunovsky/redux-react-router": "^4.3.0",
     "@mui/icons-material": "^5.11.16",
+    "@mui/lab": "^5.0.0-alpha.170",
     "@mui/material": "^5.13.2",
     "@mui/system": "^5.13.2",
+    "@mui/x-charts": "^7.15.0",
     "@mui/x-date-pickers": "^6.5.0",
     "@types/jest": "^29.5.2",
     "@types/react-router-dom": "^5.3.3",
@@ -40,13 +42,11 @@
     "d3-format": "^3.1.0",
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
-    "dagre": "^0.8.5",
     "dayjs": "^1.11.8",
     "file-saver": "^2.0.5",
     "http-proxy-middleware": "^2.0.6",
     "i18next": "^22.5.0",
     "i18next-browser-languagedetector": "^7.0.1",
-    "json-server": "^0.17.3",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "postcss-loader": "^7.3.0",

web/src/components/App.tsx

@@ -15,6 +15,7 @@ import { composeWithDevTools } from '@redux-devtools/extension'
 import { createBrowserHistory } from 'history'
 import { theme } from '../helpers/theme'
 import ColumnLevel from '../routes/column-level/ColumnLevel'
+import Dashboard from '../routes/dashboard/Dashboard'
 import Datasets from '../routes/datasets/Datasets'
 import Events from '../routes/events/Events'
 import Header from './header/Header'
@@ -62,7 +63,8 @@ const App = (): ReactElement => {
                     <Header />
                   </Container>
                   <Routes>
-                    <Route path={'/'} element={<Jobs />} />
+                    <Route path={'/'} element={<Dashboard />} />
+                    <Route path={'/jobs'} element={<Jobs />} />
                     <Route path={'/datasets'} element={<Datasets />} />
                     <Route path={'/events'} element={<Events />} />
                     <Route

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

@@ -49,7 +49,6 @@ const MqDatePicker: React.FC<DatePickerProps> = ({
           },
         },
         '.MuiOutlinedInput-notchedOutline': {
-          border: `2px solid ${theme.palette.common.white}`,
           borderRadius: theme.spacing(4),
           '> legend': {
             marginLeft: theme.spacing(2),

web/src/components/core/input-base/MqInputBase.tsx

@@ -14,13 +14,13 @@ export const MqInputBase: React.FC<MqInputBaseProps> = (props) => {
     <InputBase
       {...props}
       sx={{
-        ...props.sx,
         borderRadius: theme.spacing(4),
         position: 'relative',
         backgroundColor: 'transparent',
         fontSize: 16,
         padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
         transition: theme.transitions.create(['border-color', 'box-shadow']),
+        ...props.sx,
       }}
     />
   )

web/src/components/core/text/MqText.tsx

@@ -29,6 +29,7 @@ interface OwnProps {
   linkTo?: string
   font?: 'primary' | 'mono'
   small?: boolean
+  large?: boolean
   bottomMargin?: boolean
   block?: boolean
   sx?: SxProps
@@ -58,6 +59,7 @@ const MqText: React.FC<MqTextProps> = ({
   highlight,
   color,
   small,
+  large,
   block,
   onClick,
   sx,
@@ -126,6 +128,10 @@ const MqText: React.FC<MqTextProps> = ({
       fontSize: '.625rem',
       lineHeight: 'inherit',
     },
+    large: {
+      fontSize: '1.25rem',
+      lineHeight: 'inherit',
+    },
     paragraph: {
       marginBottom: theme.spacing(2),
     },
@@ -146,6 +152,7 @@ const MqText: React.FC<MqTextProps> = ({
     inverse ? classesObject.inverse : {},
     inline ? classesObject.inline : {},
     small ? classesObject.small : {},
+    large ? classesObject.large : {},
     link ? classesObject.link : {},
     block ? classesObject.block : {},
     paragraph ? classesObject.paragraph : {},

web/src/components/dashboard/SplitButton.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react'
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
+import Button from '@mui/material/Button'
+import ButtonGroup from '@mui/material/ButtonGroup'
+import ClickAwayListener from '@mui/material/ClickAwayListener'
+import Grow from '@mui/material/Grow'
+import MenuItem from '@mui/material/MenuItem'
+import MenuList from '@mui/material/MenuList'
+import Paper from '@mui/material/Paper'
+import Popper from '@mui/material/Popper'
+
+interface Props {
+  options: string[]
+  onClick: (option: string) => void
+}
+
+export default function SplitButton({ options, onClick }: Props) {
+  const [open, setOpen] = React.useState(false)
+  const anchorRef = React.useRef<HTMLDivElement>(null)
+  const [selectedIndex, setSelectedIndex] = React.useState(0)
+
+  const handleClick = () => {
+    onClick(options[selectedIndex])
+  }
+
+  const handleMenuItemClick = (
+    event: React.MouseEvent<HTMLLIElement, MouseEvent>,
+    index: number
+  ) => {
+    setSelectedIndex(index)
+    setOpen(false)
+  }
+
+  const handleToggle = () => {
+    setOpen((prevOpen) => !prevOpen)
+  }
+
+  const handleClose = (event: Event) => {
+    if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) {
+      return
+    }
+
+    setOpen(false)
+  }
+
+  return (
+    <>
+      <ButtonGroup
+        variant={'outlined'}
+        ref={anchorRef}
+        aria-label='Button group with a nested menu'
+        color={'secondary'}
+      >
+        <Button size={'small'} color={'secondary'} variant={'contained'} onClick={handleClick}>
+          {options[selectedIndex]}
+        </Button>
+        <Button
+          color={'secondary'}
+          size={'small'}
+          aria-controls={open ? 'split-button-menu' : undefined}
+          aria-expanded={open ? 'true' : undefined}
+          aria-label='select merge strategy'
+          aria-haspopup='menu'
+          onClick={handleToggle}
+        >
+          <ArrowDropDownIcon />
+        </Button>
+      </ButtonGroup>
+      <Popper
+        sx={{
+          zIndex: 1,
+        }}
+        open={open}
+        anchorEl={anchorRef.current}
+        role={undefined}
+        transition
+        disablePortal
+      >
+        {({ TransitionProps, placement }) => (
+          <Grow
+            {...TransitionProps}
+            style={{
+              transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom',
+            }}
+          >
+            <Paper>
+              <ClickAwayListener onClickAway={handleClose}>
+                <MenuList id='split-button-menu' autoFocusItem>
+                  {options.map((option, index) => (
+                    <MenuItem
+                      key={option}
+                      selected={index === selectedIndex}
+                      onClick={(event) => handleMenuItemClick(event, index)}
+                    >
+                      {option}
+                    </MenuItem>
+                  ))}
+                </MenuList>
+              </ClickAwayListener>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </>
+  )
+}

web/src/components/datasets/DatasetInfo.tsx

@@ -116,7 +116,11 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = (props) => {
                         <TableCell align='left'>
                           <Chip
                             size={'small'}
-                            label={<MqText font={'mono'} small>{field.type || 'N/A'}</MqText>}
+                            label={
+                              <MqText font={'mono'} small>
+                                {field.type || 'N/A'}
+                              </MqText>
+                            }
                             variant={'outlined'}
                           />
                         </TableCell>

web/src/components/paging/MqPaging.tsx

@@ -22,7 +22,7 @@ interface Props {
 const MqPaging: FunctionComponent<Props> = (props) => {
   const { pageSize, currentPage, incrementPage, decrementPage, totalCount } = props
   return (
-    <Box display={'flex'} justifyContent={'flex-end'} alignItems={'center'} mb={2}>
+    <Box display={'flex'} justifyContent={'flex-end'} alignItems={'center'}>
       <MqText subdued>
         <>
           {pageSize * currentPage + 1} - {Math.min(pageSize * (currentPage + 1), totalCount)} of{' '}

web/src/components/search/Search.tsx

@@ -6,16 +6,16 @@ import { Close, SearchOutlined } from '@mui/icons-material'
 import { DRAWER_WIDTH, HEADER_HEIGHT, theme } from '../../helpers/theme'
 import { IState } from '../../store/reducers'
 import { MqInputBase } from '../core/input-base/MqInputBase'
+import { REACT_APP_ADVANCED_SEARCH } from '../../globals'
 import { connect } from 'react-redux'
 import { useLocation } from 'react-router'
 import BaseSearch from './base-search/BaseSearch'
 import CircularProgress from '@mui/material/CircularProgress/CircularProgress'
 import ClickAwayListener from '@mui/material/ClickAwayListener'
-import OpenSearch from './open-search/OpenSearch'
 import IconButton from '@mui/material/IconButton'
+import OpenSearch from './open-search/OpenSearch'
 import React, { useEffect, useRef, useState } from 'react'
 import SearchPlaceholder from './SearchPlaceholder'
-import { REACT_APP_ADVANCED_SEARCH } from "../../globals";
 
 const useCmdKShortcut = (callback: () => void) => {
   useEffect(() => {
@@ -114,7 +114,8 @@ const Search: React.FC = ({ isLoading }: StateProps) => {
           spellCheck={false}
           sx={{
             zIndex: theme.zIndex.appBar + 2,
-            height: '64px',
+            height: HEADER_HEIGHT - 1,
+            paddingRight: theme.spacing(3),
           }}
           inputRef={inputRef}
           fullWidth={true}
@@ -181,7 +182,7 @@ const Search: React.FC = ({ isLoading }: StateProps) => {
                 }}
               >
                 <Box
-                  mt={'64px'}
+                  mt={`${HEADER_HEIGHT - 1}px`}
                   borderTop={1}
                   borderColor={'divider'}
                   overflow={'auto'}

web/src/components/search/open-search/OpenSearch.tsx

@@ -25,8 +25,8 @@ import MqStatus from '../../core/status/MqStatus'
 import MqText from '../../core/text/MqText'
 import React, { useCallback, useEffect } from 'react'
 import airflow_logo from './airlfow-logo.svg'
-import spark_logo from './spark-logo.svg'
 import dbt_logo from './dbt-logo.svg'
+import spark_logo from './spark-logo.svg'
 
 interface StateProps {
   openSearchJobs: IOpenSearchJobsState
@@ -51,7 +51,7 @@ const LOGO_MAP = {
   spark: spark_logo,
   airflow: airflow_logo,
   dbt: dbt_logo,
-};
+}
 
 function parseStringToSegments(input: string): TextSegment[] {
   return input.split(/(<em>.*?<\/em>)/).map((segment) => {
@@ -121,28 +121,28 @@ const OpenSearch: React.FC<StateProps & DispatchProps & Props> = ({
         const jobHit = openSearchJobs.data.hits[selectedIndex]
         navigate(`/lineage/${encodeNode('JOB', jobHit.namespace, jobHit.name)}`)
       } else {
-        const datasetHit = openSearchDatasets.data.hits[selectedIndex - openSearchJobs.data.hits.length]
+        const datasetHit =
+          openSearchDatasets.data.hits[selectedIndex - openSearchJobs.data.hits.length]
         navigate(`/lineage/${encodeNode('DATASET', datasetHit.namespace, datasetHit.name)}`)
       }
     }
   })
 
   const debouncedFetchJobs = useCallback(
     debounce(async (searchTerm) => {
-      fetchOpenSearchJobs(searchTerm);
-      setIsDebouncing(false); // Set loading to false after the fetch completes
+      fetchOpenSearchJobs(searchTerm)
+      setIsDebouncing(false) // Set loading to false after the fetch completes
     }, DEBOUNCE_TIME_MS),
     []
-  );
-
+  )
 
   const debouncedFetchDatasets = useCallback(
     debounce(async (searchTerm) => {
-      fetchOpenSearchDatasets(searchTerm);
-      setIsDebouncing(false); // Set loading to false after the fetch completes
+      fetchOpenSearchDatasets(searchTerm)
+      setIsDebouncing(false) // Set loading to false after the fetch completes
     }, DEBOUNCE_TIME_MS),
     []
-  );
+  )
 
   useEffect(() => {
     setIsDebouncing(true)
@@ -154,7 +154,11 @@ const OpenSearch: React.FC<StateProps & DispatchProps & Props> = ({
     setSelectedIndex(null)
   }, [openSearchJobs.data.hits, openSearchDatasets.data.hits])
 
-  if (openSearchJobs.data.hits.length === 0 && openSearchDatasets.data.hits.length === 0 && !isDebouncing) {
+  if (
+    openSearchJobs.data.hits.length === 0 &&
+    openSearchDatasets.data.hits.length === 0 &&
+    !isDebouncing
+  ) {
     return (
       <Box my={4}>
         <MqEmpty title={'No Hits'} body={'Keep typing or try a more precise search.'} />
@@ -217,12 +221,16 @@ const OpenSearch: React.FC<StateProps & DispatchProps & Props> = ({
                       {'Integration'}
                     </MqText>
                     {(() => {
-                      const engineName = hit.runFacets.processing_engine.name.toLowerCase();
+                      const engineName = hit.runFacets.processing_engine.name.toLowerCase()
                       return LOGO_MAP[engineName as keyof typeof LOGO_MAP] ? (
-                        <img src={LOGO_MAP[engineName as keyof typeof LOGO_MAP]} height={24} alt={engineName.charAt(0).toUpperCase() + engineName.slice(1)} />
+                        <img
+                          src={LOGO_MAP[engineName as keyof typeof LOGO_MAP]}
+                          height={24}
+                          alt={engineName.charAt(0).toUpperCase() + engineName.slice(1)}
+                        />
                       ) : (
                         <Chip size={'small'} label={hit.runFacets?.processing_engine.name} />
-                      );
+                      )
                     })()}
                   </Box>
                 </>
@@ -376,7 +384,11 @@ const OpenSearch: React.FC<StateProps & DispatchProps & Props> = ({
                             key={field.name}
                             label={field.name}
                             variant={'outlined'}
-                            color={field.name.toLowerCase().includes(search.toLowerCase()) ? 'primary' : 'default'}
+                            color={
+                              field.name.toLowerCase().includes(search.toLowerCase())
+                                ? 'primary'
+                                : 'default'
+                            }
                             size={'small'}
                             sx={{ mr: 1 }}
                           />

web/src/components/sidenav/Sidenav.tsx

@@ -19,6 +19,7 @@ import { FormControl, MenuItem, Select } from '@mui/material'
 import { MqInputNoIcon } from '../core/input-base/MqInputBase'
 import { useTheme } from '@emotion/react'
 
+import { Dashboard } from '@mui/icons-material'
 import iconSearchArrow from '../../img/iconSearchArrow.svg'
 import marquez_logo from './marquez-icon-white-solid.svg'
 
@@ -79,8 +80,16 @@ const Sidenav: React.FC<SidenavProps> = () => {
           <MqIconButton
             to={'/'}
             id={'homeDrawerButton'}
-            title={i18next.t('sidenav.jobs')}
+            title={i18next.t('sidenav.dataOps')}
             active={location.pathname === '/'}
+          >
+            <Dashboard />
+          </MqIconButton>
+          <MqIconButton
+            to={'/jobs'}
+            id={'jobsDrawerButton'}
+            title={i18next.t('sidenav.jobs')}
+            active={location.pathname === '/jobs'}
           >
             <FontAwesomeIcon icon={faCogs} fontSize={20} />
           </MqIconButton>