Update Events Page (#2955)

* Tuning the events page for longer events. Signed-off-by: phixMe <[email protected]> * Adding events file. Signed-off-by: phixMe <[email protected]> * Refetch jobs button. Signed-off-by: phixMe <[email protected]> * Refetch jobs button. Signed-off-by: phixMe <[email protected]> * Lint Signed-off-by: phixMe <[email protected]> --------- Signed-off-by: phixMe <[email protected]> Co-authored-by: Willy Lulciuc <[email protected]>
MarquezProject · Oct 25, 2024 · 46bbfa7 · 46bbfa7
1 parent 5a33b2f
commit 46bbfa7
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 22 deletions.
diff --git a/web/src/components/core/copy/MqCopy.tsx b/web/src/components/core/copy/MqCopy.tsx
@@ -37,7 +37,7 @@ const MqEmpty: React.FC<MqCopyProps> = ({ string }) => {
           }}
           aria-label='copy'
           size={'small'}
-          color={'primary'}
+          color={'secondary'}
         >
           {hasCopied ? <Check fontSize={'small'} /> : <ContentCopyIcon fontSize={'small'} />}
         </IconButton>

diff --git a/web/src/components/dashboard/SplitButton.tsx b/web/src/components/dashboard/SplitButton.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react'
+import { Refresh } from '@mui/icons-material'
 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 MQTooltip from '../core/tooltip/MQTooltip'
 import MenuItem from '@mui/material/MenuItem'
 import MenuList from '@mui/material/MenuList'
 import Paper from '@mui/material/Paper'
@@ -12,9 +14,10 @@ import Popper from '@mui/material/Popper'
 interface Props {
   options: string[]
   onClick: (option: string) => void
+  onRefresh?: () => void
 }
 
-export default function SplitButton({ options, onClick }: Props) {
+export default function SplitButton({ options, onClick, onRefresh }: Props) {
   const [open, setOpen] = React.useState(false)
   const anchorRef = React.useRef<HTMLDivElement>(null)
   const [selectedIndex, setSelectedIndex] = React.useState(0)
@@ -66,6 +69,11 @@ export default function SplitButton({ options, onClick }: Props) {
         >
           <ArrowDropDownIcon />
         </Button>
+        <MQTooltip title={'Refresh'}>
+          <Button size={'small'} color={'secondary'} onClick={onRefresh}>
+            <Refresh fontSize={'small'} />
+          </Button>
+        </MQTooltip>
       </ButtonGroup>
       <Popper
         sx={{

diff --git a/web/src/i18n/config.ts b/web/src/i18n/config.ts
@@ -151,7 +151,7 @@ i18next
             empty_body: 'Try changing dates or consulting our documentation to add events.',
           },
           events_columns: {
-            id: 'ID',
+            id: 'RUN_ID',
             state: 'STATE',
             name: 'NAME',
             namespace: 'NAMESPACE',

diff --git a/web/src/routes/dashboard/Dashboard.tsx b/web/src/routes/dashboard/Dashboard.tsx
@@ -150,6 +150,15 @@ const Dashboard: React.FC = ({
     { failed: 0, started: 0, completed: 0, aborted: 0 }
   )
 
+  const refresh = () => {
+    const currentSearchParams = searchParams.get('timeframe')
+    fetchJobs(null, JOB_RUN_LIMIT, 0)
+    fetchLineageMetrics(currentSearchParams === 'week' ? 'week' : 'day')
+    fetchJobMetrics(currentSearchParams === 'week' ? 'week' : 'day')
+    fetchDatasetMetrics(currentSearchParams === 'week' ? 'week' : 'day')
+    fetchSourceMetrics(currentSearchParams === 'week' ? 'week' : 'day')
+  }
+
   const { failed, started, completed, aborted } = metrics
 
   return (
@@ -195,6 +204,7 @@ const Dashboard: React.FC = ({
               <MqText subdued>REFRESH</MqText>
               <SplitButton
                 options={REFRESH_INTERVALS}
+                onRefresh={() => refresh()}
                 onClick={(option) => {
                   setIntervalKey(option as RefreshInterval)
                 }}
@@ -351,15 +361,6 @@ const Dashboard: React.FC = ({
                           'Try changing namespaces, run state, or consulting our documentation to add jobs.'
                         }
                       </MqText>
-                      <Button
-                        color={'primary'}
-                        size={'small'}
-                        onClick={() => {
-                          fetchJobs(null, JOB_RUN_LIMIT, 0)
-                        }}
-                      >
-                        Refresh
-                      </Button>
                     </>
                   </MqEmpty>
                 )}

diff --git a/web/src/routes/events/Events.tsx b/web/src/routes/events/Events.tsx
@@ -66,7 +66,7 @@ type EventsProps = StateProps & DispatchProps
 
 const EVENTS_COLUMNS = ['ID', 'STATE', 'NAME', 'NAMESPACE', 'TIME']
 
-const PAGE_SIZE = 20
+const PAGE_SIZE = 50
 const EVENTS_HEADER_HEIGHT = 64
 
 const Events: React.FC<EventsProps> = ({
@@ -296,13 +296,7 @@ const Events: React.FC<EventsProps> = ({
                         >
                           <TableCell align='left'>
                             <Box display={'flex'} alignItems={'center'}>
-                              <MQTooltip title={event.run.runId}>
-                                <Box>
-                                  <MqText font={'mono'}>
-                                    {event.run.runId.substring(0, 8)}...
-                                  </MqText>
-                                </Box>
-                              </MQTooltip>
+                              <MqText font={'mono'}>{event.run.runId}</MqText>
                               <MqCopy string={event.run.runId} />
                             </Box>
                           </TableCell>
@@ -312,9 +306,15 @@ const Events: React.FC<EventsProps> = ({
                               label={event.eventType}
                             />
                           </TableCell>
-                          <TableCell align='left'>{truncateText(event.job.name, 40)}</TableCell>
                           <TableCell align='left'>
-                            <MqText> {truncateText(event.job.namespace, 40)}</MqText>
+                            <MQTooltip title={event.job.name}>
+                              <Box display={'inline'}>{truncateText(event.job.name, 40)}</Box>
+                            </MQTooltip>
+                          </TableCell>
+                          <TableCell align='left'>
+                            <MQTooltip title={event.job.namespace}>
+                              <Box display={'inline'}>{truncateText(event.job.namespace, 40)}</Box>
+                            </MQTooltip>
                           </TableCell>
                           <TableCell align='left'>
                             <MqText>{formatUpdatedAt(event.eventTime)}</MqText>