mirror of
https://github.com/prometheus/prometheus.git
synced 2025-03-05 20:59:13 -08:00
Work on history functionality
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
parent
f3b9fd5989
commit
38259bc45e
|
@ -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"
|
||||
/>
|
||||
|
||||
|
|
|
@ -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) => {
|
||||
|
|
|
@ -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 => {
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue