From b90b5736b92ce2733ce7392d91a6260ffc168928 Mon Sep 17 00:00:00 2001
From: Boyko <boyskila@users.noreply.github.com>
Date: Tue, 17 Dec 2019 11:50:58 +0200
Subject: [PATCH] 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                  | 16 ++++++----------
 web/ui/react-app/src/TimeInput.tsx            | 10 ++++++----
 web/ui/react-app/src/utils/timeFormat.test.ts |  4 ++--
 web/ui/react-app/src/utils/timeFormat.ts      |  2 +-
 web/ui/react-app/src/utils/urlParams.test.ts  |  2 +-
 5 files changed, 16 insertions(+), 18 deletions(-)

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