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>

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>
-      );
-    });
-    page.update();
+    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(mock).toHaveBeenCalledWith('/path/prefix/api/v1/status/tsdb', {
+        cache: 'no-store',
+        credentials: 'same-origin',
+      });
 
-    expect(page.find('h2').text()).toEqual('TSDB Status');
+      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) => {
+      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);
+        }
+      );
+    });
   });
 });

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>