From 054e9d1985d87386bb4b3d9e8b572d71f17b8f16 Mon Sep 17 00:00:00 2001
From: Levi Harrison <git@leviharrison.dev>
Date: Sun, 28 Mar 2021 05:11:00 -0400
Subject: [PATCH] Change Error Messages in TSDB Status Page (#8659)

* Changed error wording

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Added another test and moved both into the correct suite

Signed-off-by: Levi Harrison <git@leviharrison.dev>
---
 .../src/pages/tsdbStatus/TSDBStatus.test.tsx  | 105 +++++++++++++-----
 .../src/pages/tsdbStatus/TSDBStatus.tsx       |  11 +-
 2 files changed, 84 insertions(+), 32 deletions(-)

diff --git a/web/ui/react-app/src/pages/tsdbStatus/TSDBStatus.test.tsx b/web/ui/react-app/src/pages/tsdbStatus/TSDBStatus.test.tsx
index b3f3162bf5..d6d41708f7 100644
--- a/web/ui/react-app/src/pages/tsdbStatus/TSDBStatus.test.tsx
+++ b/web/ui/react-app/src/pages/tsdbStatus/TSDBStatus.test.tsx
@@ -71,6 +71,26 @@ const fakeEmptyTSDBStatusResponse: {
   },
 };
 
+const fakeInvalidTimestampTSDBStatusResponse: {
+  status: string;
+  data: TSDBMap;
+} = {
+  status: 'success',
+  data: {
+    headStats: {
+      numSeries: 1,
+      numLabelPairs: 0,
+      chunkCount: 0,
+      minTime: 9223372036854776000,
+      maxTime: -9223372036854776000,
+    },
+    labelValueCountByLabelName: [],
+    seriesCountByMetricName: [],
+    memoryInBytesByLabelName: [],
+    seriesCountByLabelValuePair: [],
+  },
+};
+
 describe('TSDB Stats', () => {
   beforeEach(() => {
     fetchMock.resetMocks();
@@ -130,36 +150,65 @@ describe('TSDB Stats', () => {
         }
       }
     });
-  });
 
-  it('No Data', async () => {
-    const mock = fetchMock.mockResponse(JSON.stringify(fakeEmptyTSDBStatusResponse));
-    let page: any;
-    await act(async () => {
-      page = mount(
-        <PathPrefixContext.Provider value="/path/prefix">
-          <TSDBStatus />
-        </PathPrefixContext.Provider>
+    it('No Data', async () => {
+      const mock = fetchMock.mockResponse(JSON.stringify(fakeEmptyTSDBStatusResponse));
+      let page: any;
+      await act(async () => {
+        page = mount(
+          <PathPrefixContext.Provider value="/path/prefix">
+            <TSDBStatus />
+          </PathPrefixContext.Provider>
+        );
+      });
+      page.update();
+
+      expect(mock).toHaveBeenCalledWith('/path/prefix/api/v1/status/tsdb', {
+        cache: 'no-store',
+        credentials: 'same-origin',
+      });
+
+      expect(page.find('h2').text()).toEqual('TSDB Status');
+
+      const headStats = page
+        .find(Table)
+        .at(0)
+        .find('tbody')
+        .find('td');
+      ['0', '0', '0', 'No datapoints yet', 'No datapoints yet'].forEach((value, i) => {
+        expect(headStats.at(i).text()).toEqual(value);
+      });
+    });
+
+    it('Invalid min/max Timestamp', async () => {
+      const mock = fetchMock.mockResponse(JSON.stringify(fakeInvalidTimestampTSDBStatusResponse));
+      let page: any;
+      await act(async () => {
+        page = mount(
+          <PathPrefixContext.Provider value="/path/prefix">
+            <TSDBStatus />
+          </PathPrefixContext.Provider>
+        );
+      });
+      page.update();
+
+      expect(mock).toHaveBeenCalledWith('/path/prefix/api/v1/status/tsdb', {
+        cache: 'no-store',
+        credentials: 'same-origin',
+      });
+
+      expect(page.find('h2').text()).toEqual('TSDB Status');
+
+      const headStats = page
+        .find(Table)
+        .at(0)
+        .find('tbody')
+        .find('td');
+      ['1', '0', '0', 'Error parsing time (9223372036854776000)', 'Error parsing time (-9223372036854776000)'].forEach(
+        (value, i) => {
+          expect(headStats.at(i).text()).toEqual(value);
+        }
       );
     });
-    page.update();
-
-    expect(mock).toHaveBeenCalledWith('/path/prefix/api/v1/status/tsdb', {
-      cache: 'no-store',
-      credentials: 'same-origin',
-    });
-
-    expect(page.find('h2').text()).toEqual('TSDB Status');
-
-    const headStats = page
-      .find(Table)
-      .at(0)
-      .find('tbody')
-      .find('td');
-    ['0', '0', '0', 'Error parsing time (9223372036854776000)', 'Error parsing time (-9223372036854776000)'].forEach(
-      (value, i) => {
-        expect(headStats.at(i).text()).toEqual(value);
-      }
-    );
   });
 });
diff --git a/web/ui/react-app/src/pages/tsdbStatus/TSDBStatus.tsx b/web/ui/react-app/src/pages/tsdbStatus/TSDBStatus.tsx
index cebafcfafb..37fc71cb2b 100644
--- a/web/ui/react-app/src/pages/tsdbStatus/TSDBStatus.tsx
+++ b/web/ui/react-app/src/pages/tsdbStatus/TSDBStatus.tsx
@@ -37,9 +37,12 @@ export const TSDBStatusContent: FC<TSDBMap> = ({
 }) => {
   const unixToTime = (unix: number): string => {
     try {
-      return new Date(unix).toISOString();
+      return `${new Date(unix).toISOString()} (${unix})`;
     } catch {
-      return 'Error parsing time';
+      if (numSeries === 0) {
+        return 'No datapoints yet';
+      }
+      return `Error parsing time (${unix})`;
     }
   };
   const { chunkCount, numSeries, numLabelPairs, minTime, maxTime } = headStats;
@@ -47,8 +50,8 @@ export const TSDBStatusContent: FC<TSDBMap> = ({
     { header: 'Number of Series', value: numSeries },
     { header: 'Number of Chunks', value: chunkCount },
     { header: 'Number of Label Pairs', value: numLabelPairs },
-    { header: 'Current Min Time', value: `${unixToTime(minTime)} (${minTime})` },
-    { header: 'Current Max Time', value: `${unixToTime(maxTime)} (${maxTime})` },
+    { header: 'Current Min Time', value: `${unixToTime(minTime)}` },
+    { header: 'Current Max Time', value: `${unixToTime(maxTime)}` },
   ];
   return (
     <div>