Formatting short tables for readability (#6762)

* Formatting short tables for readability

Signed-off-by: Drumil Patel <drumilpatel720@gmail.com>

* Solving linting issues in DataTable.tsx

Signed-off-by: Drumil Patel <drumilpatel720@gmail.com>

* Increasing maxFormattable Size to 1000 and changing value of toFormatStyle

Signed-off-by: Drumil Patel <drumilpatel720@gmail.com>

* Solve tests failure for multiple alerts on size gretaer than 10000

Signed-off-by: Drumil Patel <drumilpatel720@gmail.com>

* Solve linting errors

Signed-off-by: Drumil Patel <drumilpatel720@gmail.com>

* Add tests for alert of not formatting

Signed-off-by: Drumil Patel <drumilpatel720@gmail.com>

web/ui/react-app/src/pages/graph/DataTable.test.tsx

@@ -103,8 +103,42 @@ describe('DataTable', () => {
     });
 
     it('renders a warning', () => {
-      const alert = dataTable.find(Alert);
+      const alerts = dataTable.find(Alert);
-      expect(alert.render().text()).toEqual('Warning: Fetched 10001 metrics, only displaying first 10000.');
+      expect(
+        alerts
+          .first()
+          .render()
+          .text()
+      ).toEqual('Warning: Fetched 10001 metrics, only displaying first 10000.');
+    });
+  });
+
+  describe('when resultType is vector and size is more than maximum limit of formatting', () => {
+    const dataTableProps: QueryResult = {
+      data: {
+        resultType: 'vector',
+        result: Array.from(Array(1001).keys()).map(i => {
+          return {
+            metric: {
+              __name__: `metric_name_${i}`,
+              label1: 'value_1',
+              labeln: 'value_n',
+            },
+            value: [1572098246.599, `${i}`],
+          };
+        }),
+      },
+    };
+    const dataTable = shallow(<DataTable {...dataTableProps} />);
+
+    it('renders a warning', () => {
+      const alerts = dataTable.find(Alert);
+      expect(
+        alerts
+          .first()
+          .render()
+          .text()
+      ).toEqual('Notice: Showing more than 1000 series, turning off label formatting for performance reasons.');
     });
   });
 

web/ui/react-app/src/pages/graph/DataTable.tsx

@@ -56,8 +56,10 @@ const DataTable: FC<QueryResult> = ({ data }) => {
     return <Alert color="secondary">Empty query result</Alert>;
   }
 
+  const maxFormattableSize = 1000;
   let rows: ReactNode[] = [];
   let limited = false;
+  const doFormat = data.result.length <= maxFormattableSize;
   switch (data.resultType) {
     case 'vector':
       rows = (limitSeries(data.result) as InstantSample[]).map(
@@ -65,7 +67,7 @@ const DataTable: FC<QueryResult> = ({ data }) => {
           return (
             <tr key={index}>
               <td>
-                <SeriesName labels={s.metric} format={false} />
+                <SeriesName labels={s.metric} format={doFormat} />
               </td>
               <td>{s.value[1]}</td>
             </tr>
@@ -84,7 +86,7 @@ const DataTable: FC<QueryResult> = ({ data }) => {
         return (
           <tr style={{ whiteSpace: 'pre' }} key={index}>
             <td>
-              <SeriesName labels={s.metric} format={false} />
+              <SeriesName labels={s.metric} format={doFormat} />
             </td>
             <td>{valueText}</td>
           </tr>
@@ -119,6 +121,12 @@ const DataTable: FC<QueryResult> = ({ data }) => {
           <strong>Warning:</strong> Fetched {data.result.length} metrics, only displaying first {rows.length}.
         </Alert>
       )}
+      {!doFormat && (
+        <Alert color="secondary">
+          <strong>Notice:</strong> Showing more than {maxFormattableSize} series, turning off label formatting for
+          performance reasons.
+        </Alert>
+      )}
       <Table hover size="sm" className="data-table">
         <tbody>{rows}</tbody>
       </Table>