126 lines
4.1 KiB
TypeScript
126 lines
4.1 KiB
TypeScript
// Copyright 2019 PingCAP, Inc.
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License.
|
|
// You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
|
|
import IconButton from '@material-ui/core/IconButton';
|
|
import ListSubheader from '@material-ui/core/ListSubheader';
|
|
import Menu from '@material-ui/core/Menu';
|
|
import MenuItem from '@material-ui/core/MenuItem';
|
|
import MenuList from '@material-ui/core/MenuList';
|
|
import RefreshIcon from '@material-ui/icons/Refresh';
|
|
import * as React from 'react';
|
|
|
|
|
|
const AUTO_REFRESH_INTERVAL_KEY = 'autoRefreshInterval';
|
|
|
|
interface Props {
|
|
onRefresh: () => Promise<void>
|
|
}
|
|
|
|
interface States {
|
|
isRefreshing: boolean
|
|
menuOpened: boolean
|
|
autoRefreshInterval: number
|
|
}
|
|
|
|
export default class RefreshButton extends React.Component<Props, States> {
|
|
private ref: React.RefObject<HTMLButtonElement>;
|
|
private autoRefreshTimer?: number;
|
|
|
|
constructor(props: Props) {
|
|
super(props);
|
|
|
|
this.ref = React.createRef();
|
|
|
|
this.state = {
|
|
isRefreshing: false,
|
|
menuOpened: false,
|
|
autoRefreshInterval: 0,
|
|
};
|
|
}
|
|
|
|
async refresh() {
|
|
this.setState({ isRefreshing: true });
|
|
await this.props.onRefresh();
|
|
this.setState({ isRefreshing: false });
|
|
}
|
|
|
|
changeInterval(interval: number) {
|
|
this.setState({ autoRefreshInterval: interval });
|
|
localStorage.setItem(AUTO_REFRESH_INTERVAL_KEY, '' + interval);
|
|
|
|
clearInterval(this.autoRefreshTimer);
|
|
this.autoRefreshTimer = (interval > 0) ?
|
|
window.setInterval(() => this.refresh(), interval * 1000) :
|
|
undefined;
|
|
}
|
|
|
|
handleCloseMenu = () => {
|
|
this.setState({ menuOpened: false });
|
|
}
|
|
|
|
handleRefresh = () => {
|
|
this.handleCloseMenu();
|
|
this.refresh();
|
|
}
|
|
|
|
handleToggleMenu = () => {
|
|
this.setState(state => ({ menuOpened: !state.menuOpened }));
|
|
}
|
|
|
|
handleChangeInterval = (interval: number) => () => {
|
|
this.handleCloseMenu();
|
|
this.changeInterval(interval);
|
|
}
|
|
|
|
async componentDidMount() {
|
|
await this.refresh();
|
|
|
|
const autoRefreshInterval = (localStorage.getItem(AUTO_REFRESH_INTERVAL_KEY) as any) | 0;
|
|
this.changeInterval(autoRefreshInterval);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
clearInterval(this.autoRefreshTimer);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<IconButton ref={this.ref} title='Refresh' color='inherit' onClick={this.handleToggleMenu}>
|
|
<RefreshIcon />
|
|
</IconButton>
|
|
<Menu anchorEl={this.ref.current} open={this.state.menuOpened} onClose={this.handleCloseMenu}>
|
|
<MenuList>
|
|
<MenuItem disabled={this.state.isRefreshing} onClick={this.handleRefresh} divider>
|
|
Refresh now
|
|
</MenuItem>
|
|
<ListSubheader>
|
|
Auto refresh
|
|
</ListSubheader>
|
|
<MenuItem onClick={this.handleChangeInterval(2)} selected={this.state.autoRefreshInterval === 2}>
|
|
2 seconds
|
|
</MenuItem>
|
|
<MenuItem onClick={this.handleChangeInterval(300)} selected={this.state.autoRefreshInterval === 300}>
|
|
5 minutes
|
|
</MenuItem>
|
|
<MenuItem onClick={this.handleChangeInterval(0)} selected={this.state.autoRefreshInterval === 0}>
|
|
Off
|
|
</MenuItem>
|
|
</MenuList>
|
|
</Menu>
|
|
</div>
|
|
);
|
|
}
|
|
}
|