github.com/filecoin-project/bacalhau@v0.3.23-0.20230228154132-45c989550ace/dashboard/frontend/src/components/job/JobProgram.tsx (about)

     1  import React, { FC, useMemo } from 'react'
     2  import { SxProps } from '@mui/system'
     3  import Box from '@mui/material/Box'
     4  import Typography from '@mui/material/Typography'
     5  import {
     6    Job,
     7  } from '../../types'
     8  import {
     9    getShortId,
    10  } from '../../utils/job'
    11  
    12  const JobProgram: FC<{
    13    job: Job,
    14    sx?: SxProps,
    15    imgSize?: number,
    16    fontSize?: string,
    17  }> = ({
    18    job,
    19    sx = {},
    20    imgSize = 36,
    21    fontSize = '1em',
    22  }) => {
    23    const engineLogo = useMemo(() => {
    24      if (job.Spec.Engine == "Docker") {
    25        return (
    26          <img
    27            style={{
    28              width: `${imgSize}px`,
    29              marginRight: '10px',
    30            }}
    31            src="/img/docker-logo.png" alt="Docker"
    32          />
    33        )
    34      } else if(job.Spec.Engine == "Wasm") {
    35        return (
    36          <img
    37            style={{
    38              width: `${imgSize}px`,
    39              height: `${imgSize}px`,
    40            }}
    41            src="/img/wasm-logo.png" alt="WASM"
    42          />
    43        )
    44      }
    45    }, [
    46      job,
    47    ])
    48  
    49    const programDetails = useMemo(() => {
    50      if (job.Spec.Engine == "Docker") {
    51        const image = job.Spec.Docker?.Image || ''
    52        const entrypoint = job.Spec.Docker?.Entrypoint || []
    53        const details = `${image} ${(entrypoint || []).join(' ')}`
    54        return (
    55          <div>
    56            <div>
    57              <Typography variant="caption" style={{fontWeight: 'bold'}}>
    58                { image }
    59              </Typography>
    60            </div>
    61            <div>
    62              <Typography variant="caption" style={{color: '#666'}}>
    63                { (entrypoint || []).join(' ') }
    64              </Typography>
    65            </div>
    66          </div>
    67        )
    68      } else if (job.Spec.Engine == "Wasm") {
    69        let programCID = ''
    70        let entryPoint = job.Spec.Wasm.EntryPoint
    71        let useUrl = ''
    72        if (job.Spec.Contexts.length > 0) {
    73          programCID = job.Spec.Contexts[0].CID || ''
    74          useUrl = `http://ipfs.io/ipfs/${programCID}` 
    75        }
    76        return (
    77          <Box component="div" sx={{
    78            pl: 1,
    79          }}>
    80            <Typography variant="caption" style={{fontWeight: 'bold'}}>
    81                <a
    82                  href={ useUrl }
    83                  target="_blank"
    84                  rel="noreferrer"
    85                  style={{
    86                    fontSize: '0.8em',
    87                    color: '#333',
    88                  }}
    89                >
    90                  { getShortId(programCID, 16) }:{ entryPoint }
    91                </a>
    92            </Typography>
    93          </Box>
    94        )
    95      } else {
    96        return 'unknown'
    97      }
    98    }, [
    99      job,
   100    ])
   101  
   102    return (
   103      <Box
   104        component="div"
   105        sx={{
   106          display: 'flex',
   107          flexDirection: 'row',
   108          alignItems: 'center',
   109          justifyContent: 'flex-start',
   110          ...sx
   111        }}
   112      >
   113        <div>
   114          { engineLogo }
   115        </div>
   116        <div>
   117          { programDetails }
   118        </div>
   119        
   120        
   121      </Box>
   122    )
   123  }
   124  
   125  export default JobProgram