1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { StyleRulesCallback, WithStyles, withStyles, Card, CardContent, Button, Typography, Grid, Table, TableHead, TableRow, TableCell, TableBody, Tooltip, IconButton } from '@material-ui/core';
7 import { ArvadosTheme } from '~/common/custom-theme';
8 import { SshKeyResource } from '~/models/ssh-key';
9 import { AddIcon, MoreOptionsIcon, KeyIcon } from '~/components/icon/icon';
11 type CssRules = 'root' | 'link' | 'buttonContainer' | 'table' | 'tableRow' | 'keyIcon';
13 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
19 color: theme.palette.primary.main,
20 textDecoration: 'none',
27 marginTop: theme.spacing.unit
35 color: theme.palette.primary.main
39 export interface SshKeyPanelRootActionProps {
40 openSshKeyCreateDialog: () => void;
41 openRowOptions: (event: React.MouseEvent<HTMLElement>, sshKey: SshKeyResource) => void;
42 openPublicKeyDialog: (name: string, publicKey: string) => void;
45 export interface SshKeyPanelRootDataProps {
46 sshKeys: SshKeyResource[];
50 type SshKeyPanelRootProps = SshKeyPanelRootDataProps & SshKeyPanelRootActionProps & WithStyles<CssRules>;
52 export const SshKeyPanelRoot = withStyles(styles)(
53 ({ classes, sshKeys, openSshKeyCreateDialog, openPublicKeyDialog, hasKeys, openRowOptions }: SshKeyPanelRootProps) =>
54 <Card className={classes.root}>
56 <Grid container direction="row">
58 { !hasKeys && <Typography paragraph={true} >
59 You have not yet set up an SSH public key for use with Arvados.
60 <a href='https://doc.arvados.org/user/getting_started/ssh-access-unix.html'
61 target='blank' className={classes.link}>
65 { !hasKeys && <Typography paragraph={true}>
66 When you have an SSH key you would like to use, add it using button below.
69 <Grid item xs={4} className={classes.buttonContainer}>
70 <Button onClick={openSshKeyCreateDialog} color="primary" variant="contained">
71 <AddIcon /> Add New Ssh Key
76 {hasKeys && <Table className={classes.table}>
78 <TableRow className={classes.tableRow}>
79 <TableCell>Name</TableCell>
80 <TableCell>UUID</TableCell>
81 <TableCell>Authorized user</TableCell>
82 <TableCell>Expires at</TableCell>
83 <TableCell>Key type</TableCell>
84 <TableCell>Public Key</TableCell>
89 {sshKeys.map((sshKey, index) =>
90 <TableRow key={index} className={classes.tableRow}>
91 <TableCell>{sshKey.name}</TableCell>
92 <TableCell>{sshKey.uuid}</TableCell>
93 <TableCell>{sshKey.authorizedUserUuid}</TableCell>
94 <TableCell>{sshKey.expiresAt || '(none)'}</TableCell>
95 <TableCell>{sshKey.keyType}</TableCell>
97 <Tooltip title="Public Key" disableFocusListener>
98 <IconButton onClick={() => openPublicKeyDialog(sshKey.name, sshKey.publicKey)}>
99 <KeyIcon className={classes.keyIcon} />
104 <Tooltip title="More options" disableFocusListener>
105 <IconButton onClick={event => openRowOptions(event, sshKey)}>