Work on history functionality

Signed-off-by: Julius Volz <julius.volz@gmail.com>

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<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"
         />
 

src/Panel.tsx

@@ -201,13 +201,9 @@ class Panel extends Component<PanelProps, PanelState> {
     this.setOptions({endTime: endTime});
   }
 
-  handleChangeResolution = (resolution: number) => {
+  handleChangeResolution = (resolution: number | null) => {
-    // 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});
   }
-  }
 
   handleChangeStacking = (stacked: boolean) => {
     this.setOptions({stacked: stacked});

src/PanelList.tsx

@@ -21,12 +21,7 @@ class PanelList extends Component<any, PanelListState> {
   constructor(props: any) {
     super(props);
 
-    const urlPanels = decodePanelOptionsFromQueryString(window.location.search).map((opts: PanelOptions) => {
+    const urlPanels = decodePanelOptionsFromQueryString(window.location.search);
-      return {
-        key: this.getKey(),
-        options: opts,
-      };
-    });
 
     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 => {

src/TimeInput.tsx

@@ -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);
+        this.props.onChangeTime(e.date.valueOf());
-      } else {
-        this.$time.datetimepicker('date', e.target.value);
       }
     });
   }
@@ -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">

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,
+        key: key.toString(),
-        ...options,
+        options: {...PanelDefaultOptions, ...options},
       });
       options = {};
       key++;
@@ -45,8 +45,8 @@ function parseParams(params: string[]): PanelOptions[] {
     addParam(options, p.substring(prefix.length));
   }
   panelOpts.push({
-    ...PanelDefaultOptions,
+    key: key.toString(),
-    ...options,
+    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;
       }