src/views-components/advanced-tab-dialog/metadataTab.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from "react";
   6 import { Table, TableHead, TableCell, TableRow, TableBody, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
   7
   8 type CssRules = 'cell';
   9
  10 const styles: StyleRulesCallback<CssRules> = theme => ({
  11     cell: {
  12         paddingRight: theme.spacing.unit * 2
  13     }
  14 });
  15
  16 interface MetadataTable {
  17     uuid: string;
  18     linkClass: string;
  19     name: string;
  20     tail: string;
  21     head: string;
  22     properties: any;
  23 }
  24
  25 interface MetadataProps {
  26     items: MetadataTable[];
  27 }
  28
  29
  30 export const MetadataTab = withStyles(styles)((props: MetadataProps & WithStyles<CssRules>) =>
  31     <Table>
  32         <TableHead>
  33             <TableRow>
  34                 <TableCell>uuid</TableCell>
  35                 <TableCell>link_class</TableCell>
  36                 <TableCell>name</TableCell>
  37                 <TableCell>tail</TableCell>
  38                 <TableCell>head</TableCell>
  39                 <TableCell>properties</TableCell>
  40             </TableRow>
  41         </TableHead>
  42         <TableBody>
  43             {props.items.map((it: any, index: number) => {
  44                 return (
  45                     <TableRow key={index}>
  46                         {tableCell(it.uuid, props.classes)}
  47                         {tableCell(it.linkClass, props.classes)}
  48                         {tableCell(it.name, props.classes)}
  49                         {tableCell(it.tailUuid, props.classes)}
  50                         {tableCell(it.headUuid, props.classes)}
  51                         {tableCell(JSON.stringify(it.properties, null, 2), props.classes)}
  52                     </TableRow>
  53                 );
  54             })}
  55         </TableBody>
  56     </Table>
  57 );
  58
  59 const tableCell = (value: string, classes: any) =>
  60     <TableCell className={classes.cell}>{value}</TableCell>;