diff --git a/web/ui/react-app/src/App.css b/web/ui/react-app/src/App.css index 8d74af8e0..b7e0bcf4a 100644 --- a/web/ui/react-app/src/App.css +++ b/web/ui/react-app/src/App.css @@ -98,7 +98,7 @@ button.execute-btn { margin-bottom: 10px; } -.graph-controls input { +.graph-controls input, .table-controls input { text-align: center; } @@ -106,27 +106,23 @@ button.execute-btn { width: 50px; } -.graph-controls .time-input input { +.time-input input { border-right: none; } -div.time-input { - width: 240px !important; -} - -.table-controls input { - text-align: center; +.time-input { + width: 270px !important; } .graph-controls input.resolution-input { width: 90px; } -.graph-controls .time-input, .graph-controls .resolution-input, .graph-controls .stacked-input { +.graph-controls > :not(:first-child) { margin-left: 20px; } -.graph-controls .clear-time-btn { + .graph-controls .clear-time-btn, .table-controls .clear-time-btn { background: #fff; border-left: none; border-top: 1px solid #ced4da; diff --git a/web/ui/react-app/src/TimeInput.tsx b/web/ui/react-app/src/TimeInput.tsx index 43d0590bd..edd039fa7 100644 --- a/web/ui/react-app/src/TimeInput.tsx +++ b/web/ui/react-app/src/TimeInput.tsx @@ -32,19 +32,21 @@ interface TimeInputProps { class TimeInput extends Component { private timeInputRef = React.createRef(); - private $time: any | null = null; + private $time: any = null; getBaseTime = (): number => { return this.props.time || moment().valueOf(); }; + calcShiftRange = () => (this.props.range * 1000) / 2; + increaseTime = (): void => { - const time = this.getBaseTime() + (this.props.range * 1000) / 2; + const time = this.getBaseTime() + this.calcShiftRange(); this.props.onChangeTime(time); }; decreaseTime = (): void => { - const time = this.getBaseTime() - (this.props.range * 1000) / 2; + const time = this.getBaseTime() - this.calcShiftRange(); this.props.onChangeTime(time); }; @@ -65,7 +67,7 @@ class TimeInput extends Component { showToday: true, }, sideBySide: true, - format: 'YYYY-MM-DD HH:mm', + format: 'YYYY-MM-DD HH:mm:ss', locale: 'en', timeZone: 'UTC', defaultDate: this.props.time, diff --git a/web/ui/react-app/src/utils/timeFormat.test.ts b/web/ui/react-app/src/utils/timeFormat.test.ts index 9218cbbe3..700f083bd 100644 --- a/web/ui/react-app/src/utils/timeFormat.test.ts +++ b/web/ui/react-app/src/utils/timeFormat.test.ts @@ -2,8 +2,8 @@ import { formatTime, parseTime, formatRange, parseRange, humanizeDuration, forma describe('formatTime', () => { it('returns a time string representing the time in seconds', () => { - expect(formatTime(1572049380000)).toEqual('2019-10-26 00:23'); - expect(formatTime(0)).toEqual('1970-01-01 00:00'); + expect(formatTime(1572049380000)).toEqual('2019-10-26 00:23:00'); + expect(formatTime(0)).toEqual('1970-01-01 00:00:00'); }); }); diff --git a/web/ui/react-app/src/utils/timeFormat.ts b/web/ui/react-app/src/utils/timeFormat.ts index 402f661ba..09368fe6f 100644 --- a/web/ui/react-app/src/utils/timeFormat.ts +++ b/web/ui/react-app/src/utils/timeFormat.ts @@ -34,7 +34,7 @@ export function parseTime(timeText: string): number { } 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(); diff --git a/web/ui/react-app/src/utils/urlParams.test.ts b/web/ui/react-app/src/utils/urlParams.test.ts index dffcbd328..dff8467bb 100644 --- a/web/ui/react-app/src/utils/urlParams.test.ts +++ b/web/ui/react-app/src/utils/urlParams.test.ts @@ -27,7 +27,7 @@ const panels: any = [ }, ]; 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', () => { it('returns [] when query is empty', () => {