blue500: string;
grey500: string;
purple: string;
+ orange: string;
}
const arvadosPurple = '#361336';
red900: red['900'],
blue500: blue['500'],
grey500: grey500,
- purple: arvadosPurple
+ purple: arvadosPurple,
+ orange: '#f0ad4e',
}
},
overrides: {
contextMenuColumn: boolean;
dataTableDefaultView?: React.ReactNode;
working?: boolean;
+ currentRefresh?: string;
+ currentRoute?: string;
hideColumnSelector?: boolean;
paperProps?: PaperProps;
actions?: React.ReactNode;
export const DataExplorer = withStyles(styles)(
class DataExplorerGeneric<T> extends React.Component<DataExplorerProps<T>> {
+ state = {
+ showLoading: false,
+ prevRefresh: '',
+ prevRoute: '',
+ };
+
+ componentDidUpdate(prevProps: DataExplorerProps<T>) {
+ const currentRefresh = this.props.currentRefresh || '';
+ const currentRoute = this.props.currentRoute || '';
+
+ if (currentRoute !== this.state.prevRoute) {
+ // Component already mounted, but the user comes from a route change,
+ // like browsing through a project hierarchy.
+ this.setState({
+ showLoading: this.props.working,
+ prevRoute: currentRoute,
+ });
+ }
+
+ if (currentRefresh !== this.state.prevRefresh) {
+ // Component already mounted, but the user just clicked the
+ // refresh button.
+ this.setState({
+ showLoading: this.props.working,
+ prevRefresh: currentRefresh,
+ });
+ }
+ if (this.state.showLoading && !this.props.working) {
+ this.setState({
+ showLoading: false,
+ });
+ }
+ }
componentDidMount() {
if (this.props.onSetColumns) {
this.props.onSetColumns(this.props.columns);
}
+ // Component just mounted, so we need to show the loading indicator.
+ this.setState({
+ showLoading: this.props.working,
+ prevRefresh: this.props.currentRefresh || '',
+ prevRoute: this.props.currentRoute || '',
+ });
}
render() {
const {
- columns, onContextMenu, onFiltersChange, onSortToggle, working, extractKey,
+ columns, onContextMenu, onFiltersChange, onSortToggle, extractKey,
rowsPerPage, rowsPerPageOptions, onColumnToggle, searchLabel, searchValue, onSearch,
items, itemsAvailable, onRowClick, onRowDoubleClick, classes,
dataTableDefaultView, hideColumnSelector, actions, paperProps, hideSearchInput,
doHidePanel, doMaximizePanel, panelName, panelMaximized, elementPath
} = this.props;
- const dataCy = this.props["data-cy"];
- return <Paper className={classes.root} {...paperProps} key={paperKey} data-cy={dataCy}>
+ return <Paper className={classes.root} {...paperProps} key={paperKey} data-cy={this.props["data-cy"]}>
<Grid container direction="column" wrap="nowrap" className={classes.container}>
<div>
{title && <Grid item xs className={classes.title}>{title}</Grid>}
onFiltersChange={onFiltersChange}
onSortToggle={onSortToggle}
extractKey={extractKey}
- working={working}
+ working={this.state.showLoading}
defaultView={dataTableDefaultView}
currentItemUuid={currentItemUuid}
currentRoute={paperKey} /></Grid>
export const DataTable = withStyles(styles)(
class Component<T> extends React.Component<DataTableProps<T>> {
render() {
- const { items, classes } = this.props;
+ const { items, classes, working } = this.props;
return <div className={classes.root}>
<div className={classes.content}>
<Table>
</TableRow>
</TableHead>
<TableBody className={classes.tableBody}>
- { this.props.working !== undefined && !this.props.working && items.map(this.renderBodyRow) }
+ { !working && items.map(this.renderBodyRow) }
</TableBody>
</Table>
- { this.props.working &&
+ { !!working &&
<div className={classes.loader}>
<DataTableDefaultView
icon={PendingIcon}
messages={['Loading data, please wait.']} />
</div> }
- {items.length === 0 && this.props.working !== undefined && !this.props.working && this.renderNoItemsPlaceholder()}
+ {items.length === 0 && !working && this.renderNoItemsPlaceholder()}
</div>
</div>;
}
import { Button } from "@material-ui/core";
import { shallow, configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
-import { RefreshButton } from './refresh-button';
+import { LAST_REFRESH_TIMESTAMP, RefreshButton } from './refresh-button';
configure({ adapter: new Adapter() });
});
it('should pass window location to router', () => {
+ expect(localStorage.getItem(LAST_REFRESH_TIMESTAMP)).toBeFalsy();
// setup
const wrapper = shallow(<RefreshButton {...props} />);
// then
expect(props.history.replace).toHaveBeenCalledWith('/');
+ expect(localStorage.getItem(LAST_REFRESH_TIMESTAMP)).not.toBeFalsy();
});
});
onClick?: () => void;
}
+export const LAST_REFRESH_TIMESTAMP = 'lastRefreshTimestamp';
+
export const RefreshButton = ({ history, classes, onClick }: RouteComponentProps & WithStyles<CssRules> & RefreshButtonProps) =>
<Button
color="primary"
size="small"
variant="contained"
onClick={() => {
+ // Notify interested parties that the refresh button was clicked.
+ const now = (new Date()).getTime();
+ localStorage.setItem(LAST_REFRESH_TIMESTAMP, now.toString());
history.replace(window.location.pathname);
if (onClick) {
onClick();
case ProcessStatus.WARNING:
return customs.colors.yellow700;
case ProcessStatus.FAILING:
+ return customs.colors.orange;
case ProcessStatus.CANCELLED:
case ProcessStatus.FAILED:
return customs.colors.red900;
import { DataColumn } from "components/data-table/data-column";
import { DataColumns } from "components/data-table/data-table";
import { DataTableFilters } from 'components/data-table-filters/data-table-filters-tree';
+import { LAST_REFRESH_TIMESTAMP } from "components/refresh-button/refresh-button";
interface Props {
id: string;
onContextMenu?: (event: React.MouseEvent<HTMLElement>, item: any, isAdmin?: boolean) => void;
onRowDoubleClick: (item: any) => void;
extractKey?: (item: any) => React.Key;
- working?: boolean;
}
-let data: any[] = [];
-let href: string = '';
-
const mapStateToProps = (state: RootState, { id }: Props) => {
const progress = state.progressIndicator.find(p => p.id === id);
const dataExplorerState = getDataExplorer(state.dataExplorer, id);
const currentRoute = state.router.location ? state.router.location.pathname : '';
+ const currentRefresh = localStorage.getItem(LAST_REFRESH_TIMESTAMP) || '';
const currentItemUuid = currentRoute === '/workflows' ? state.properties.workflowPanelDetailsUuid : state.detailsPanel.resourceUuid;
- let loading = false;
-
- if (dataExplorerState.items.length > 0 && data === dataExplorerState.items && href !== window.location.href) {
- loading = true
- } else {
- href = window.location.href;
- data = dataExplorerState.items;
- }
-
- const working = (progress && progress.working) || loading;
-
- return { ...dataExplorerState, working, paperKey: currentRoute, currentItemUuid };
+ return {
+ ...dataExplorerState,
+ working: !!progress?.working,
+ currentRefresh: currentRefresh,
+ currentRoute: currentRoute,
+ paperKey: currentRoute,
+ currentItemUuid
+ };
};
const mapDispatchToProps = () => {
});
};
-export const DataExplorer = connect(mapStateToProps, mapDispatchToProps())(DataExplorerComponent);
+export const DataExplorer = connect(mapStateToProps, mapDispatchToProps)(DataExplorerComponent);
green700: 'rgb(0, 255, 0)',
yellow700: 'rgb(255, 255, 0)',
red900: 'rgb(255, 0, 0)',
+ orange: 'rgb(240, 173, 78)',
grey500: 'rgb(128, 128, 128)',
}
},
[
// CR Status ; Priority ; C Status ; Exit Code ; C RuntimeStatus ; Expected label ; Expected Color
[CR.COMMITTED, 1, C.RUNNING, null, {}, PS.RUNNING, props.theme.customs.colors.blue500],
- [CR.COMMITTED, 1, C.RUNNING, null, {error: 'whoops'}, PS.FAILING, props.theme.customs.colors.red900],
+ [CR.COMMITTED, 1, C.RUNNING, null, {error: 'whoops'}, PS.FAILING, props.theme.customs.colors.orange],
[CR.COMMITTED, 1, C.RUNNING, null, {warning: 'watch out!'}, PS.WARNING, props.theme.customs.colors.yellow700],
[CR.FINAL, 1, C.CANCELLED, null, {}, PS.CANCELLED, props.theme.customs.colors.red900],
[CR.FINAL, 1, C.COMPLETE, 137, {}, PS.FAILED, props.theme.customs.colors.red900],
import { toggleDetailsPanel } from 'store/details-panel/details-panel-action';
import RefreshButton from "components/refresh-button/refresh-button";
import { loadSidePanelTreeProjects } from "store/side-panel-tree/side-panel-tree-actions";
+import { Dispatch } from "redux";
type CssRules = "infoTooltip";
Routes.matchAllProcessesRoute(pathname) ||
Routes.matchTrashRoute(pathname) ||
Routes.matchFavoritesRoute(pathname);
-
- /* return !Routes.matchWorkflowRoute(pathname) && !Routes.matchUserVirtualMachineRoute(pathname) &&
- * !Routes.matchAdminVirtualMachineRoute(pathname) && !Routes.matchRepositoriesRoute(pathname) &&
- * !Routes.matchSshKeysAdminRoute(pathname) && !Routes.matchSshKeysUserRoute(pathname) &&
- * !Routes.matchSiteManagerRoute(pathname) &&
- * !Routes.matchKeepServicesRoute(pathname) && !Routes.matchComputeNodesRoute(pathname) &&
- * !Routes.matchApiClientAuthorizationsRoute(pathname) && !Routes.matchUsersRoute(pathname) &&
- * !Routes.matchMyAccountRoute(pathname) && !Routes.matchLinksRoute(pathname); */
};
-export const MainContentBar =
- connect((state: RootState) => ({
- buttonVisible: isButtonVisible(state),
- projectUuid: state.detailsPanel.resourceUuid,
- }), (dispatch) => ({
- onDetailsPanelToggle: () => dispatch<any>(toggleDetailsPanel()),
- onRefreshButtonClick: (id) => {
- dispatch<any>(loadSidePanelTreeProjects(id));
- }
- }))(
- withStyles(styles)(
- (props: MainContentBarProps & WithStyles<CssRules> & any) =>
- <Toolbar>
- <Grid container>
- <Grid container item xs alignItems="center">
- <Breadcrumbs />
- </Grid>
- <Grid item>
- <RefreshButton onClick={() => {
- props.onRefreshButtonClick(props.projectUuid);
- }} />
- </Grid>
- <Grid item>
- {props.buttonVisible && <Tooltip title="Additional Info">
- <IconButton data-cy="additional-info-icon" color="inherit" className={props.classes.infoTooltip} onClick={props.onDetailsPanelToggle}>
- <DetailsIcon />
- </IconButton>
- </Tooltip>}
- </Grid>
- </Grid>
- </Toolbar>
- )
- );
+const mapStateToProps = (state: RootState) => ({
+ buttonVisible: isButtonVisible(state),
+ projectUuid: state.detailsPanel.resourceUuid,
+});
+
+const mapDispatchToProps = () => (dispatch: Dispatch) => ({
+ onDetailsPanelToggle: () => dispatch<any>(toggleDetailsPanel()),
+ onRefreshButtonClick: (id) => {
+ dispatch<any>(loadSidePanelTreeProjects(id));
+ }
+});
+
+export const MainContentBar = connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(
+ (props: MainContentBarProps & WithStyles<CssRules> & any) =>
+ <Toolbar><Grid container>
+ <Grid container item xs alignItems="center">
+ <Breadcrumbs />
+ </Grid>
+ <Grid item>
+ <RefreshButton onClick={() => {
+ props.onRefreshButtonClick(props.projectUuid);
+ }} />
+ </Grid>
+ <Grid item>
+ {props.buttonVisible && <Tooltip title="Additional Info">
+ <IconButton data-cy="additional-info-icon"
+ color="inherit"
+ className={props.classes.infoTooltip}
+ onClick={props.onDetailsPanelToggle}>
+ <DetailsIcon />
+ </IconButton>
+ </Tooltip>}
+ </Grid>
+ </Grid></Toolbar>
+));
projects / arvados-workbench2.git / commitdiff