github.com/filecoin-project/bacalhau@v0.3.23-0.20230228154132-45c989550ace/dashboard/frontend/src/components/job/JobState.tsx (about) 1 import React, { FC, useMemo } from 'react' 2 import { SxProps } from '@mui/system' 3 import Box from '@mui/material/Box' 4 import { 5 Job, 6 } from '../../types' 7 8 import ShardState from './ShardState' 9 10 import { 11 getJobShardState, 12 getShardStateTitle, 13 } from '../../utils/job' 14 15 const JobState: FC<{ 16 job: Job, 17 sx?: SxProps, 18 }> = ({ 19 job, 20 sx = {}, 21 }) => { 22 const shardState = useMemo(() => { 23 return getShardStateTitle(getJobShardState(job)) 24 }, [ 25 job, 26 ]) 27 28 return ( 29 <Box 30 component="div" 31 sx={{ 32 display: 'flex', 33 flexDirection: 'row', 34 alignItems: 'center', 35 justifyContent: 'flex-start', 36 ...sx 37 }} 38 > 39 <div 40 style={{ 41 minWidth: '70px', 42 }} 43 > 44 <ShardState 45 state={ shardState } 46 /> 47 </div> 48 </Box> 49 ) 50 } 51 52 export default JobState