Work on history functionality

Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2019-02-17 14:43:11 +01:00
parent f3b9fd5989
commit 38259bc45e
5 changed files with 42 additions and 29 deletions

View file

@ -35,7 +35,7 @@ interface GraphControlsProps {
onChangeRange: (range: number) => void;
onChangeEndTime: (endTime: number | null) => void;
onChangeResolution: (resolution: number) => void;
onChangeResolution: (resolution: number | null) => void;
onChangeStacking: (stacked: boolean) => void;
}
@ -97,6 +97,15 @@ class GraphControls extends Component<GraphControlsProps> {
}
}
componentDidUpdate(prevProps: GraphControlsProps) {
if (prevProps.range !== this.props.range) {
this.changeRangeInput(this.props.range);
}
if (prevProps.resolution !== this.props.resolution) {
this.resolutionRef.current!.value = this.props.resolution !== null ? this.props.resolution.toString() : '';
}
}
render() {
return (
<Form inline className="graph-controls" onSubmit={e => e.preventDefault()}>
@ -128,7 +137,10 @@ class GraphControls extends Component<GraphControlsProps> {
className="resolution-input"
defaultValue={this.props.resolution !== null ? this.props.resolution.toString() : ''}
innerRef={this.resolutionRef}
onBlur={() => this.props.onChangeResolution(parseInt(this.resolutionRef.current!.value))}
onBlur={() => {
const res = parseInt(this.resolutionRef.current!.value);
this.props.onChangeResolution(res ? res : null);
}}
bsSize="sm"
/>

View file

@ -201,12 +201,8 @@ class Panel extends Component<PanelProps, PanelState> {
this.setOptions({endTime: endTime});
}
handleChangeResolution = (resolution: number) => {
// TODO: Where should we validate domain model constraints? In the parent's
// change handler like here, or in the calling component?
if (resolution > 0) {
this.setOptions({resolution: resolution});
}
handleChangeResolution = (resolution: number | null) => {
this.setOptions({resolution: resolution});
}
handleChangeStacking = (stacked: boolean) => {

View file

@ -21,12 +21,7 @@ class PanelList extends Component<any, PanelListState> {
constructor(props: any) {
super(props);
const urlPanels = decodePanelOptionsFromQueryString(window.location.search).map((opts: PanelOptions) => {
return {
key: this.getKey(),
options: opts,
};
});
const urlPanels = decodePanelOptionsFromQueryString(window.location.search);
this.state = {
panels: urlPanels.length !== 0 ? urlPanels : [
@ -71,6 +66,14 @@ class PanelList extends Component<any, PanelListState> {
}
})
.catch(error => this.setState({ timeDriftError: error.message }));
window.onpopstate = () => {
console.log("POPSTATE");
const panels = decodePanelOptionsFromQueryString(window.location.search);
if (panels.length !== 0) {
this.setState({panels: panels});
}
}
}
getKey(): string {
@ -87,12 +90,14 @@ class PanelList extends Component<any, PanelListState> {
}
return p;
});
console.log("UPDATE OP", key, opts);
this.setState({panels: newPanels}, this.updateURL)
}
updateURL(): void {
console.log("UPDATE");
const query = encodePanelOptionsToQueryString(this.state.panels);
history.pushState({}, '', 'graph' + query);
history.pushState({}, '', query);
}
addPanel = (): void => {

View file

@ -50,18 +50,15 @@ class TimeInput extends Component<TimeInputProps> {
increaseTime = (): void => {
const time = this.getBaseTime() + this.props.range*1000/2;
this.props.onChangeTime(time);
this.$time.datetimepicker('date', moment(time));
}
decreaseTime = (): void => {
const time = this.getBaseTime() - this.props.range*1000/2;
this.props.onChangeTime(time);
this.$time.datetimepicker('date', moment(time));
}
clearTime = (): void => {
this.props.onChangeTime(null);
this.$time.datetimepicker('date', null);
}
componentDidMount() {
@ -85,9 +82,7 @@ class TimeInput extends Component<TimeInputProps> {
this.$time.on('change.datetimepicker', (e: any) => {
if (e.date) {
this.props.onChangeTime(e.date);
} else {
this.$time.datetimepicker('date', e.target.value);
this.props.onChangeTime(e.date.valueOf());
}
});
}
@ -96,6 +91,11 @@ class TimeInput extends Component<TimeInputProps> {
this.$time.datetimepicker('destroy');
}
componentDidUpdate() {
console.log(this.props);
this.$time.datetimepicker('date', this.props.time ? moment(this.props.time) : null);
}
render() {
return (
<InputGroup className="time-input" size="sm">

View file

@ -1,7 +1,7 @@
import { parseRange, parseTime, formatRange, formatTime } from './timeFormat';
import { PanelOptions, PanelType, PanelDefaultOptions } from '../Panel';
export function decodePanelOptionsFromQueryString(query: string): PanelOptions[] {
export function decodePanelOptionsFromQueryString(query: string): {key: string, options: PanelOptions}[] {
if (query === '') {
return [];
}
@ -21,12 +21,12 @@ interface IncompletePanelOptions {
stacked?: boolean;
}
function parseParams(params: string[]): PanelOptions[] {
function parseParams(params: string[]): {key: string, options: PanelOptions}[] {
const sortedParams = params.filter((p) => {
return paramFormat.test(p);
}).sort();
let panelOpts: PanelOptions[] = [];
let panelOpts: {key: string, options: PanelOptions}[] = [];
let key = 0;
let options: IncompletePanelOptions = {};
@ -35,8 +35,8 @@ function parseParams(params: string[]): PanelOptions[] {
if (!p.startsWith(prefix)) {
panelOpts.push({
...PanelDefaultOptions,
...options,
key: key.toString(),
options: {...PanelDefaultOptions, ...options},
});
options = {};
key++;
@ -45,8 +45,8 @@ function parseParams(params: string[]): PanelOptions[] {
addParam(options, p.substring(prefix.length));
}
panelOpts.push({
...PanelDefaultOptions,
...options,
key: key.toString(),
options: {...PanelDefaultOptions, ...options},
});
return panelOpts;
@ -85,7 +85,7 @@ function addParam(opts: IncompletePanelOptions, param: string): void {
break;
case 'step_input':
const res = parseInt(val)
const res = parseInt(val);
if (res > 0) {
opts.resolution = res;
}