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>

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;

web/ui/react-app/src/TimeInput.tsx

@@ -32,19 +32,21 @@ interface TimeInputProps {
 
 class TimeInput extends Component<TimeInputProps> {
   private timeInputRef = React.createRef<HTMLInputElement>();
-  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<TimeInputProps> {
         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,

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');
   });
 });
 

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();

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', () => {