1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
8 CardContent, CircularProgress,
19 } from '@material-ui/core';
20 import { ArvadosTheme } from '~/common/custom-theme';
21 import { Session, SessionStatus } from "~/models/session";
22 import Button from "@material-ui/core/Button";
23 import { User } from "~/models/user";
24 import { compose } from "redux";
25 import { Field, FormErrors, InjectedFormProps, reduxForm, reset, stopSubmit } from "redux-form";
26 import { TextField } from "~/components/text-field/text-field";
27 import { addSession } from "~/store/auth/auth-action-session";
28 import { SITE_MANAGER_REMOTE_HOST_VALIDATION } from "~/validators/validators";
32 } from "~/store/collection-panel/collection-panel-files/collection-panel-files-actions";
34 type CssRules = 'root' | 'link' | 'buttonContainer' | 'table' | 'tableRow' | 'status' | 'remoteSiteInfo' | 'buttonAdd';
36 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
42 color: theme.palette.primary.main,
43 textDecoration: 'none',
50 marginTop: theme.spacing.unit
69 marginTop: theme.spacing.unit * 3
73 export interface SiteManagerPanelRootActionProps {
76 export interface SiteManagerPanelRootDataProps {
81 type SiteManagerPanelRootProps = SiteManagerPanelRootDataProps & SiteManagerPanelRootActionProps & WithStyles<CssRules> & InjectedFormProps;
82 const SITE_MANAGER_FORM_NAME = 'siteManagerForm';
84 export const SiteManagerPanelRoot = compose(
85 reduxForm<{remoteHost: string}>({
86 form: SITE_MANAGER_FORM_NAME,
87 onSubmit: async (data, dispatch) => {
89 await dispatch(addSession(data.remoteHost));
90 dispatch(reset(SITE_MANAGER_FORM_NAME));
95 dispatch(stopSubmit(SITE_MANAGER_FORM_NAME, errors));
101 (({ classes, sessions, handleSubmit }: SiteManagerPanelRootProps) =>
102 <Card className={classes.root}>
104 <Grid container direction="row">
106 <Typography variant='body1' paragraph={true} >
107 You can log in to multiple Arvados sites here, then use the multi-site search page to search collections and projects on all sites at once.
112 {sessions.length > 0 && <Table className={classes.table}>
114 <TableRow className={classes.tableRow}>
115 <TableCell>Cluster ID</TableCell>
116 <TableCell>Username</TableCell>
117 <TableCell>Email</TableCell>
118 <TableCell>Status</TableCell>
122 {sessions.map((session, index) => {
123 const validating = session.status === SessionStatus.BEING_VALIDATED;
124 return <TableRow key={index} className={classes.tableRow}>
125 <TableCell>{session.clusterId}</TableCell>
126 <TableCell>{validating ? <CircularProgress size={20}/> : session.username}</TableCell>
127 <TableCell>{validating ? <CircularProgress size={20}/> : session.email}</TableCell>
129 <div className={classes.status} style={{
130 color: session.loggedIn ? '#fff' : '#000',
131 backgroundColor: session.loggedIn ? '#009966' : '#FFC414'
133 {session.loggedIn ? "Logged in" : "Logged out"}
141 <form onSubmit={handleSubmit}>
142 <Grid container direction="row">
144 <Typography variant='body1' paragraph={true} className={classes.remoteSiteInfo}>
145 To add a remote Arvados site, paste the remote site's host here (see "ARVADOS_API_HOST" on the "current token" page).
151 validate={SITE_MANAGER_REMOTE_HOST_VALIDATION}
152 component={TextField}
153 placeholder="zzzz.arvadosapi.com"
159 <Button type="submit" variant="contained" color="primary"
160 className={classes.buttonAdd}>