Cleanup issues highlighted by some Spark Integration Data

web/src/components/jobs/JobTags.tsx

@@ -219,7 +219,9 @@ const JobTags: React.FC<IProps> = (props) => {
           <MQText label sx={{ fontSize: '1.25rem' }} bottomMargin>
             Select a Tag to change
           </MQText>
-          <MQText label sx={{ fontSize: '0.85rem' }}>Tag</MQText>
+          <MQText label sx={{ fontSize: '0.85rem' }}>
+            Tag
+          </MQText>
           <Autocomplete
             options={tagData.map((option) => option.name)}
             autoSelect

web/src/components/jobs/RunInfo.tsx

@@ -59,12 +59,12 @@ const RunInfo: FunctionComponent<RunInfoProps> = (props) => {
   return (
     <Box>
       {<MqCode code={(jobFacets?.sql as SqlFacet)?.query} language={'sql'} />}
-      {
+      {jobFacets?.sourceCode && (
         <MqCode
           code={(jobFacets.sourceCode as SourceCodeFacet)?.sourceCode}
           language={(jobFacets.sourceCode as SourceCodeFacet)?.language}
         />
-      }
+      )}
       {run.facets && (
         <Box mt={2}>
           <Box mb={1}>

web/src/components/jobs/Runs.tsx

@@ -136,7 +136,12 @@ const Runs: FunctionComponent<RunsProps> = (props) => {
                 }}
                 onClick={() => handleClick(run)}
               >
-                <TableCell align='left'>{run.id}</TableCell>
+                <TableCell align='left'>
+                  <Box display={'flex'} alignItems={'center'}>
+                    {run.id.substring(0, 8)}...
+                    <MqCopy string={run.id} />{' '}
+                  </Box>
+                </TableCell>
                 <TableCell align='left'>
                   <MqStatus color={runStateColor(run.state)} label={run.state} />
                 </TableCell>

web/src/routes/datasets/Datasets.tsx

@@ -28,6 +28,7 @@ import {
 } from '../../helpers/nodes'
 import { fetchDatasets, resetDatasets } from '../../store/actionCreators'
 import { formatUpdatedAt } from '../../helpers'
+import { truncateText } from '../../helpers/text'
 import { useTheme } from '@emotion/react'
 import Assertions from '../../components/datasets/Assertions'
 import Box from '@mui/material/Box'
@@ -203,11 +204,11 @@ const Datasets: React.FC<DatasetsProps> = ({
                                 dataset.name
                               )}`}
                             >
-                              {dataset.name}
+                              {truncateText(dataset.name, 40)}
                             </MqText>
                           </TableCell>
                           <TableCell align='left'>
-                            <MqText>{dataset.namespace}</MqText>
+                            <MqText>{truncateText(dataset.namespace, 40)}</MqText>
                           </TableCell>
                           <TableCell align='left'>
                             <MqText>{dataset.sourceName}</MqText>

web/src/routes/events/Events.tsx

@@ -25,6 +25,7 @@ import { fetchEvents, resetEvents } from '../../store/actionCreators'
 import { fileSize, formatUpdatedAt } from '../../helpers'
 import { formatDateAPIQuery, formatDatePicker } from '../../helpers/time'
 import { saveAs } from 'file-saver'
+import { truncateText } from '../../helpers/text'
 import { useSearchParams } from 'react-router-dom'
 import { useTheme } from '@emotion/react'
 import Box from '@mui/material/Box'
@@ -305,9 +306,9 @@ const Events: React.FC<EventsProps> = ({
                               label={event.eventType}
                             />
                           </TableCell>
-                          <TableCell align='left'>{event.job.name}</TableCell>
+                          <TableCell align='left'>{truncateText(event.job.name, 40)}</TableCell>
                           <TableCell align='left'>
-                            <MqText> {event.job.namespace} </MqText>
+                            <MqText> {truncateText(event.job.namespace, 40)} </MqText>
                           </TableCell>
                           <TableCell align='left'>
                             <MqText>{formatUpdatedAt(event.eventTime)}</MqText>

web/src/routes/jobs/Jobs.tsx

@@ -24,6 +24,7 @@ import { encodeNode, runStateColor } from '../../helpers/nodes'
 import { fetchJobs, resetJobs } from '../../store/actionCreators'
 import { formatUpdatedAt } from '../../helpers'
 import { stopWatchDuration } from '../../helpers/time'
+import { truncateText } from '../../helpers/text'
 import Box from '@mui/material/Box'
 import CircularProgress from '@mui/material/CircularProgress/CircularProgress'
 import IconButton from '@mui/material/IconButton'
@@ -183,11 +184,11 @@ const Jobs: React.FC<JobsProps> = ({
                             link
                             linkTo={`/lineage/${encodeNode('JOB', job.namespace, job.name)}`}
                           >
-                            {job.name}
+                            {truncateText(job.name, 40)}
                           </MqText>
                         </TableCell>
                         <TableCell align='left'>
-                          <MqText>{job.namespace}</MqText>
+                          <MqText>{truncateText(job.namespace, 40)}</MqText>
                         </TableCell>
                         <TableCell align='left'>
                           <MqText>{formatUpdatedAt(job.updatedAt)}</MqText>

web/src/routes/table-level/ActionBar.tsx

@@ -2,6 +2,7 @@ import { ArrowBackIosRounded, Refresh } from '@mui/icons-material'
 import { Divider, FormControlLabel, Switch, TextField } from '@mui/material'
 import { fetchLineage } from '../../store/actionCreators'
 import { theme } from '../../helpers/theme'
+import { truncateText } from '../../helpers/text'
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import Box from '@mui/material/Box'
 import IconButton from '@mui/material/IconButton'
@@ -68,12 +69,14 @@ export const ActionBar = ({
         <Divider orientation='vertical' flexItem sx={{ mx: 2 }} />
         <Box>
           <MqText subdued>Namespace</MqText>
-          <MqText font={'mono'}>{namespace || 'Unknown namespace name'}</MqText>
+          <MqText font={'mono'}>
+            {namespace ? truncateText(namespace, 40) : 'Unknown namespace name'}
+          </MqText>
         </Box>
         <Divider orientation='vertical' flexItem sx={{ mx: 2 }} />
         <Box>
           <MqText subdued>Name</MqText>
-          <MqText font={'mono'}>{name || 'Unknown dataset name'}</MqText>
+          <MqText font={'mono'}>{name ? truncateText(name, 40) : 'Unknown dataset name'}</MqText>
         </Box>
       </Box>
       <Box display={'flex'} alignItems={'center'}>