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

     1  import React, { FC } from 'react'
     2  import { SxProps } from '@mui/system'
     3  import Stack from '@mui/material/Stack'
     4  import Box from '@mui/material/Box'
     5  import {
     6    getShortId,
     7  } from '../../utils/job'
     8  import {
     9    StorageSpec,
    10  } from '../../types'
    11  import FilPlus from './FilPlus'
    12  
    13  const InputVolumes: FC<{
    14    storageSpecs: StorageSpec[],
    15    includeDatacap?: boolean,
    16    sx?: SxProps,
    17  }> = ({
    18    storageSpecs,
    19    includeDatacap = false,
    20    sx = {},
    21  }) => {
    22    return (
    23      <Stack direction="row">
    24        {
    25          includeDatacap && (
    26            <Box
    27              component="div"
    28              sx={{
    29                mr: 1,
    30              }}
    31            >
    32              <FilPlus />
    33            </Box>
    34          )
    35        }
    36        <Box
    37          component="div"
    38          sx={{
    39            width: '100%',
    40            mr: 1,
    41            ...sx
    42          }}
    43        >
    44          {
    45            storageSpecs.map((storageSpec) => {
    46              let useUrl = ''
    47              if(storageSpec.URL) {
    48                const parts = storageSpec.URL.split(':')
    49                parts.pop()
    50                useUrl = parts.join(':')
    51              }
    52              else if(storageSpec.CID) {
    53                useUrl = `http://ipfs.io/ipfs/${storageSpec.CID}` 
    54              }
    55              return (
    56                <li key={storageSpec.CID || storageSpec.URL}>
    57                  <a
    58                    href={ useUrl }
    59                    target="_blank"
    60                    rel="noreferrer"
    61                    style={{
    62                      fontSize: '0.8em',
    63                      color: '#333',
    64                    }}
    65                  >
    66                    { getShortId(storageSpec.CID || storageSpec.URL || '', 16) }:{ storageSpec.path }
    67                  </a>
    68                </li>
    69              )
    70            })
    71          }
    72        </Box>
    73      </Stack>
    74    )
    75  }
    76  
    77  export default InputVolumes