From 38259bc45e5c30f9a7ea5a7524b8ce4b49b90b5f Mon Sep 17 00:00:00 2001 From: Julius Volz Date: Sun, 17 Feb 2019 14:43:11 +0100 Subject: [PATCH] Work on history functionality Signed-off-by: Julius Volz --- src/GraphControls.tsx | 16 ++++++++++++++-- src/Panel.tsx | 8 ++------ src/PanelList.tsx | 19 ++++++++++++------- src/TimeInput.tsx | 12 ++++++------ src/utils/urlParams.ts | 16 ++++++++-------- 5 files changed, 42 insertions(+), 29 deletions(-) diff --git a/src/GraphControls.tsx b/src/GraphControls.tsx index fb912b4418..b9ec42708a 100644 --- a/src/GraphControls.tsx +++ b/src/GraphControls.tsx @@ -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 { } } + 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 (
e.preventDefault()}> @@ -128,7 +137,10 @@ class GraphControls extends Component { 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" /> diff --git a/src/Panel.tsx b/src/Panel.tsx index 240a4f95c1..b28a5c7c93 100644 --- a/src/Panel.tsx +++ b/src/Panel.tsx @@ -201,12 +201,8 @@ class Panel extends Component { 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) => { diff --git a/src/PanelList.tsx b/src/PanelList.tsx index 2a86755308..8806a9f09b 100644 --- a/src/PanelList.tsx +++ b/src/PanelList.tsx @@ -21,12 +21,7 @@ class PanelList extends Component { 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 { } }) .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 { } 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 => { diff --git a/src/TimeInput.tsx b/src/TimeInput.tsx index 245964a3cd..f35939e345 100644 --- a/src/TimeInput.tsx +++ b/src/TimeInput.tsx @@ -50,18 +50,15 @@ class TimeInput extends Component { 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 { 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 { this.$time.datetimepicker('destroy'); } + componentDidUpdate() { + console.log(this.props); + this.$time.datetimepicker('date', this.props.time ? moment(this.props.time) : null); + } + render() { return ( diff --git a/src/utils/urlParams.ts b/src/utils/urlParams.ts index dbd4b3b720..6a25598e95 100644 --- a/src/utils/urlParams.ts +++ b/src/utils/urlParams.ts @@ -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; }