Allow sec timestamp (#6460)
* adding seconds timestamp to time input Signed-off-by: Boyko Lalov <boiskila@gmail.com> * calc time range properly Signed-off-by: Boyko Lalov <boiskila@gmail.com> * fix test Signed-off-by: Boyko Lalov <boiskila@gmail.com> * unify table and graph time inputs Signed-off-by: blalov <boiskila@gmail.com> * rename calcTimeRange func Signed-off-by: blalov <boiskila@gmail.com>
This commit is contained in:
parent
207808bbae
commit
b90b5736b9
|
@ -98,7 +98,7 @@ button.execute-btn {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.graph-controls input {
|
.graph-controls input, .table-controls input {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -106,27 +106,23 @@ button.execute-btn {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.graph-controls .time-input input {
|
.time-input input {
|
||||||
border-right: none;
|
border-right: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.time-input {
|
.time-input {
|
||||||
width: 240px !important;
|
width: 270px !important;
|
||||||
}
|
|
||||||
|
|
||||||
.table-controls input {
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.graph-controls input.resolution-input {
|
.graph-controls input.resolution-input {
|
||||||
width: 90px;
|
width: 90px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.graph-controls .time-input, .graph-controls .resolution-input, .graph-controls .stacked-input {
|
.graph-controls > :not(:first-child) {
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.graph-controls .clear-time-btn {
|
.graph-controls .clear-time-btn, .table-controls .clear-time-btn {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-left: none;
|
border-left: none;
|
||||||
border-top: 1px solid #ced4da;
|
border-top: 1px solid #ced4da;
|
||||||
|
|
|
@ -32,19 +32,21 @@ interface TimeInputProps {
|
||||||
|
|
||||||
class TimeInput extends Component<TimeInputProps> {
|
class TimeInput extends Component<TimeInputProps> {
|
||||||
private timeInputRef = React.createRef<HTMLInputElement>();
|
private timeInputRef = React.createRef<HTMLInputElement>();
|
||||||
private $time: any | null = null;
|
private $time: any = null;
|
||||||
|
|
||||||
getBaseTime = (): number => {
|
getBaseTime = (): number => {
|
||||||
return this.props.time || moment().valueOf();
|
return this.props.time || moment().valueOf();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
calcShiftRange = () => (this.props.range * 1000) / 2;
|
||||||
|
|
||||||
increaseTime = (): void => {
|
increaseTime = (): void => {
|
||||||
const time = this.getBaseTime() + (this.props.range * 1000) / 2;
|
const time = this.getBaseTime() + this.calcShiftRange();
|
||||||
this.props.onChangeTime(time);
|
this.props.onChangeTime(time);
|
||||||
};
|
};
|
||||||
|
|
||||||
decreaseTime = (): void => {
|
decreaseTime = (): void => {
|
||||||
const time = this.getBaseTime() - (this.props.range * 1000) / 2;
|
const time = this.getBaseTime() - this.calcShiftRange();
|
||||||
this.props.onChangeTime(time);
|
this.props.onChangeTime(time);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -65,7 +67,7 @@ class TimeInput extends Component<TimeInputProps> {
|
||||||
showToday: true,
|
showToday: true,
|
||||||
},
|
},
|
||||||
sideBySide: true,
|
sideBySide: true,
|
||||||
format: 'YYYY-MM-DD HH:mm',
|
format: 'YYYY-MM-DD HH:mm:ss',
|
||||||
locale: 'en',
|
locale: 'en',
|
||||||
timeZone: 'UTC',
|
timeZone: 'UTC',
|
||||||
defaultDate: this.props.time,
|
defaultDate: this.props.time,
|
||||||
|
|
|
@ -2,8 +2,8 @@ import { formatTime, parseTime, formatRange, parseRange, humanizeDuration, forma
|
||||||
|
|
||||||
describe('formatTime', () => {
|
describe('formatTime', () => {
|
||||||
it('returns a time string representing the time in seconds', () => {
|
it('returns a time string representing the time in seconds', () => {
|
||||||
expect(formatTime(1572049380000)).toEqual('2019-10-26 00:23');
|
expect(formatTime(1572049380000)).toEqual('2019-10-26 00:23:00');
|
||||||
expect(formatTime(0)).toEqual('1970-01-01 00:00');
|
expect(formatTime(0)).toEqual('1970-01-01 00:00:00');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -34,7 +34,7 @@ export function parseTime(timeText: string): number {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function formatTime(time: number): string {
|
export function formatTime(time: number): string {
|
||||||
return moment.utc(time).format('YYYY-MM-DD HH:mm');
|
return moment.utc(time).format('YYYY-MM-DD HH:mm:ss');
|
||||||
}
|
}
|
||||||
|
|
||||||
export const now = (): number => moment().valueOf();
|
export const now = (): number => moment().valueOf();
|
||||||
|
|
|
@ -27,7 +27,7 @@ const panels: any = [
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
const query =
|
const query =
|
||||||
'?g0.expr=rate(node_cpu_seconds_total%7Bmode%3D%22system%22%7D%5B1m%5D)&g0.tab=0&g0.stacked=0&g0.range_input=1h&g0.end_input=2019-10-25%2023%3A37&g0.moment_input=2019-10-25%2023%3A37&g1.expr=node_filesystem_avail_bytes&g1.tab=1&g1.stacked=0&g1.range_input=1h';
|
'?g0.expr=rate(node_cpu_seconds_total%7Bmode%3D%22system%22%7D%5B1m%5D)&g0.tab=0&g0.stacked=0&g0.range_input=1h&g0.end_input=2019-10-25%2023%3A37%3A00&g0.moment_input=2019-10-25%2023%3A37%3A00&g1.expr=node_filesystem_avail_bytes&g1.tab=1&g1.stacked=0&g1.range_input=1h';
|
||||||
|
|
||||||
describe('decodePanelOptionsFromQueryString', () => {
|
describe('decodePanelOptionsFromQueryString', () => {
|
||||||
it('returns [] when query is empty', () => {
|
it('returns [] when query is empty', () => {
|
||||||
|
|
Loading…
Reference in New Issue