diff --git a/web-console/src/components/index.ts b/web-console/src/components/index.ts index 063875a1495..fb9475d8b69 100644 --- a/web-console/src/components/index.ts +++ b/web-console/src/components/index.ts @@ -33,3 +33,5 @@ export * from './show-log/show-log'; export * from './table-column-selector/table-column-selector'; export * from './view-control-bar/view-control-bar'; export * from './clearable-input/clearable-input'; +export * from './refresh-button/refresh-button'; +export * from './timed-button/timed-button'; diff --git a/web-console/src/components/refresh-button/refresh-button.tsx b/web-console/src/components/refresh-button/refresh-button.tsx new file mode 100644 index 00000000000..71905b67d11 --- /dev/null +++ b/web-console/src/components/refresh-button/refresh-button.tsx @@ -0,0 +1,57 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you 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 { IconNames } from '@blueprintjs/icons'; +import React from 'react'; + +import { LocalStorageKeys } from '../../utils'; +import { TimedButton } from '../timed-button/timed-button'; + +export interface RefreshButtonProps extends React.Props { + onRefresh: (auto: boolean) => void; + localStorageKey?: LocalStorageKeys; +} + +export class RefreshButton extends React.PureComponent { + constructor(props: RefreshButtonProps, context: any) { + super(props, context); + } + + render() { + const { onRefresh, localStorageKey } = this.props; + const intervals = [ + { label: '5 seconds', value: 5000 }, + { label: '10 seconds', value: 10000 }, + { label: '30 seconds', value: 30000 }, + { label: '1 minute', value: 60000 }, + { label: '2 minutes', value: 120000 }, + { label: 'None', value: 0 }, + ]; + + return ( + + ); + } +} diff --git a/web-console/src/components/timed-button/timed-button.scss b/web-console/src/components/timed-button/timed-button.scss new file mode 100644 index 00000000000..28798802398 --- /dev/null +++ b/web-console/src/components/timed-button/timed-button.scss @@ -0,0 +1,22 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you 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. + */ + +.timed-button { + padding: 10px 10px 5px 10px; + } + diff --git a/web-console/src/components/timed-button/timed-button.tsx b/web-console/src/components/timed-button/timed-button.tsx new file mode 100644 index 00000000000..7b5d95727f6 --- /dev/null +++ b/web-console/src/components/timed-button/timed-button.tsx @@ -0,0 +1,131 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you 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 { Button, ButtonGroup, IButtonProps, Popover, Radio, RadioGroup } from '@blueprintjs/core'; +import { IconNames } from '@blueprintjs/icons'; +import React from 'react'; + +import { localStorageGet, LocalStorageKeys, localStorageSet } from '../../utils'; + +import './timed-button.scss'; + +export interface Interval { + label: string; + value: number; +} + +export interface TimedButtonProps extends IButtonProps { + intervals: Interval[]; + onRefresh: (auto: boolean) => void; + localStorageKey?: LocalStorageKeys; + label: string; + defaultValue: number; +} + +export interface TimedButtonState { + interval: number; +} + +export class TimedButton extends React.PureComponent { + constructor(props: TimedButtonProps, context: any) { + super(props, context); + this.state = { + interval: + this.props.localStorageKey && localStorageGet(this.props.localStorageKey) + ? Number(localStorageGet(this.props.localStorageKey)) + : this.props.defaultValue, + }; + } + + private timer: any; + + componentDidMount(): void { + if (this.state.interval) { + this.timer = setTimeout(() => { + this.continuousRefresh(this.state.interval); + }, this.state.interval); + } + } + + componentWillUnmount(): void { + this.clearTimer(); + } + + clearTimer() { + if (this.timer) { + clearTimeout(this.timer); + } + this.timer = undefined; + } + + continuousRefresh = (selectedInterval: number) => { + if (selectedInterval) { + this.timer = setTimeout(() => { + this.props.onRefresh(true); + this.continuousRefresh(selectedInterval); + }, selectedInterval); + } + }; + + handleSelection = (e: any) => { + const selectedInterval = Number(e.currentTarget.value); + this.clearTimer(); + this.setState({ interval: selectedInterval }); + if (this.props.localStorageKey) { + localStorageSet(this.props.localStorageKey, String(selectedInterval)); + } + this.continuousRefresh(selectedInterval); + }; + + render() { + const { + label, + intervals, + onRefresh, + type, + text, + icon, + defaultValue, + localStorageKey, + ...other + } = this.props; + const { interval } = this.state; + + return ( + + -