1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
21 } from '@material-ui/core';
22 import { ArvadosTheme } from '~/common/custom-theme';
23 import { Session, SessionStatus } from "~/models/session";
24 import Button from "@material-ui/core/Button";
25 import { compose, Dispatch } from "redux";
26 import { Field, FormErrors, InjectedFormProps, reduxForm, reset, stopSubmit } from "redux-form";
27 import { TextField } from "~/components/text-field/text-field";
28 import { addSession } from "~/store/auth/auth-action-session";
29 import { SITE_MANAGER_REMOTE_HOST_VALIDATION } from "~/validators/validators";
30 import { Config } from '~/common/config';
31 import { ResourceCluster } from '~/views-components/data-explorer/renderers';
32 import { TrashIcon } from "~/components/icon/icon";
34 type CssRules = 'root' | 'link' | 'buttonContainer' | 'table' | 'tableRow' |
35 'remoteSiteInfo' | 'buttonAdd' | 'buttonLoggedIn' | 'buttonLoggedOut' |
38 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
44 color: theme.palette.primary.main,
45 textDecoration: 'none',
52 marginTop: theme.spacing.unit
67 marginTop: theme.spacing.unit * 3
70 minHeight: theme.spacing.unit,
73 backgroundColor: '#009966',
75 backgroundColor: '#008450',
79 minHeight: theme.spacing.unit,
82 backgroundColor: '#FFC414',
84 backgroundColor: '#eaaf14',
89 export interface SiteManagerPanelRootActionProps {
90 toggleSession: (session: Session) => void;
91 removeSession: (session: Session) => void;
94 export interface SiteManagerPanelRootDataProps {
96 remoteHostsConfig: { [key: string]: Config };
99 type SiteManagerPanelRootProps = SiteManagerPanelRootDataProps & SiteManagerPanelRootActionProps & WithStyles<CssRules> & InjectedFormProps;
100 const SITE_MANAGER_FORM_NAME = 'siteManagerForm';
102 const submitSession = (remoteHost: string) =>
103 (dispatch: Dispatch) => {
104 dispatch<any>(addSession(remoteHost, undefined, true)).then(() => {
105 dispatch(reset(SITE_MANAGER_FORM_NAME));
106 }).catch((e: any) => {
110 dispatch(stopSubmit(SITE_MANAGER_FORM_NAME, errors));
114 export const SiteManagerPanelRoot = compose(
115 reduxForm<{ remoteHost: string }>({
116 form: SITE_MANAGER_FORM_NAME,
118 onSubmit: (data, dispatch) => {
119 dispatch(submitSession(data.remoteHost));
123 (({ classes, sessions, handleSubmit, toggleSession, removeSession, remoteHostsConfig }: SiteManagerPanelRootProps) =>
124 <Card className={classes.root}>
126 <Grid container direction="row">
128 <Typography paragraph={true} >
129 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.
134 {sessions.length > 0 && <Table className={classes.table}>
136 <TableRow className={classes.tableRow}>
137 <TableCell>Cluster ID</TableCell>
138 <TableCell>Host</TableCell>
139 <TableCell>Email</TableCell>
140 <TableCell>UUID</TableCell>
141 <TableCell>Status</TableCell>
142 <TableCell>Actions</TableCell>
146 {sessions.map((session, index) => {
147 const validating = session.status === SessionStatus.BEING_VALIDATED;
148 return <TableRow key={index} className={classes.tableRow}>
149 <TableCell>{remoteHostsConfig[session.clusterId] ?
150 <a href={remoteHostsConfig[session.clusterId].workbench2Url} style={{ textDecoration: 'none' }}> <ResourceCluster uuid={session.clusterId} /></a>
151 : session.clusterId}</TableCell>
152 <TableCell>{session.remoteHost}</TableCell>
153 <TableCell>{validating ? <CircularProgress size={20} /> : session.email}</TableCell>
154 <TableCell>{validating ? <CircularProgress size={20} /> : session.uuid}</TableCell>
155 <TableCell className={classes.statusCell}>
157 disabled={validating || session.status === SessionStatus.INVALIDATED || session.active}
158 className={session.loggedIn ? classes.buttonLoggedIn : classes.buttonLoggedOut}
159 onClick={() => toggleSession(session)}>
160 {validating ? "Validating" : (session.loggedIn ? "Logged in" : "Logged out")}
163 <IconButton onClick={() => removeSession(session)}>
171 <form onSubmit={handleSubmit}>
172 <Grid container direction="row">
174 <Typography paragraph={true} className={classes.remoteSiteInfo}>
175 To add a remote Arvados site, paste the remote site's host here (see "ARVADOS_API_HOST" on the "current token" page).
181 validate={SITE_MANAGER_REMOTE_HOST_VALIDATION}
182 component={TextField}
183 placeholder="zzzz.arvadosapi.com"
189 <Button type="submit" variant="contained" color="primary"
190 className={classes.buttonAdd}>