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 import { UserResource, getUserDisplayName } from "~/models/user";
   8
   9 type CssRules = 'cell';
  10
  11 const styles: StyleRulesCallback<CssRules> = theme => ({
  12     cell: {
  13         paddingRight: theme.spacing.unit * 2
  14     }
  15 });
  16
  17 interface MetadataTable {
  18     uuid: string;
  19     linkClass: string;
  20     name: string;
  21     tailUuid: string;
  22     headUuid: string;
  23     properties: any;
  24 }
  25
  26 interface MetadataProps {
  27     items: MetadataTable[];
  28     user: UserResource;
  29     uuid: string;
  30 }
  31
  32 export const MetadataTab = withStyles(styles)((props: MetadataProps & WithStyles<CssRules>) =>
  33     <Table>
  34         <TableHead>
  35             <TableRow>
  36                 <TableCell>uuid</TableCell>
  37                 <TableCell>link_class</TableCell>
  38                 <TableCell>name</TableCell>
  39                 <TableCell>tail</TableCell>
  40                 <TableCell>head</TableCell>
  41                 <TableCell>properties</TableCell>
  42             </TableRow>
  43         </TableHead>
  44         <TableBody>
  45             {props.items.map((it, index) =>
  46                 <TableRow key={index}>
  47                     <TableCell className={props.classes.cell}>{it.uuid}</TableCell>
  48                     <TableCell className={props.classes.cell}>{it.linkClass}</TableCell>
  49                     <TableCell className={props.classes.cell}>{it.name}</TableCell>
  50                     <TableCell className={props.classes.cell}>{props.user && `User: ${getUserDisplayName(props.user)}`}</TableCell>
  51                     <TableCell className={props.classes.cell}>{it.headUuid === props.uuid ? 'this' : it.headUuid}</TableCell>
  52                     <TableCell className={props.classes.cell}>{JSON.stringify(it.properties)}</TableCell>
  53                 </TableRow>
  54             )}
  55         </TableBody>
  56     </Table>
  57 );