Refactored native histogram query UI

Signed-off-by: Sebastian Rabenhorst <sebastian.rabenhorst@shopify.com>
thanos-io · Apr 19, 2023 · cba7ebf · cba7ebf
1 parent f3e2798
commit cba7ebf
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 20 deletions.
diff --git a/pkg/ui/bindata.go b/pkg/ui/bindata.go
diff --git a/pkg/ui/react-app/src/pages/graph/DataTable.tsx b/pkg/ui/react-app/src/pages/graph/DataTable.tsx
@@ -3,7 +3,7 @@ import React, { FC, ReactNode } from 'react';
 import { UncontrolledAlert, Table } from 'reactstrap';
 
 import SeriesName from './SeriesName';
-import { Metric, Histogram } from '../../types/types';
+import { Metric, Histogram, SampleValue, SampleHistogram } from '../../types/types';
 
 import moment from 'moment';
 
@@ -40,9 +40,6 @@ interface RangeSamples {
   histograms?: SampleHistogram[];
 }
 
-type SampleValue = [number, string];
-type SampleHistogram = [number, Histogram];
-
 const limitSeries = <S extends InstantSample | RangeSamples>(series: S[]): S[] => {
   const maxSeries = 10000;
 
@@ -83,7 +80,7 @@ const DataTable: FC<QueryResult> = ({ data }) => {
       break;
     case 'matrix':
       rows = (limitSeries(data.result) as RangeSamples[]).map((s, index) => {
-        const valueText = s.values
+        const valuesAndTimes = s.values
           ? s.values
               .map((v) => {
                 return v[1] + ' @' + v[0];
@@ -107,7 +104,7 @@ const DataTable: FC<QueryResult> = ({ data }) => {
               <SeriesName labels={s.metric} format={doFormat} />
             </td>
             <td>
-              {valueText} {histogramsAndTimes}
+              {valuesAndTimes} {histogramsAndTimes}
             </td>
           </tr>
         );

diff --git a/pkg/ui/react-app/src/pages/graph/Graph.tsx b/pkg/ui/react-app/src/pages/graph/Graph.tsx
@@ -3,7 +3,7 @@ import React, { PureComponent } from 'react';
 import ReactResizeDetector from 'react-resize-detector';
 
 import { Legend } from './Legend';
-import { Metric, QueryParams, Histogram } from '../../types/types';
+import { Metric, QueryParams, SampleValue, SampleHistogram } from '../../types/types';
 import { isPresent } from '../../utils';
 import { normalizeData, getOptions, toHoverColor } from './GraphHelpers';
 
@@ -16,7 +16,7 @@ require('jquery.flot.tooltip');
 export interface GraphProps {
   data: {
     resultType: string;
-    result: Array<{ metric: Metric; values: [number, string][]; histograms?: [number, Histogram][] }>;
+    result: Array<{ metric: Metric; values: SampleValue[]; histograms?: SampleHistogram[] }>;
   };
   stacked: boolean;
   useLocalTime: boolean;

diff --git a/pkg/ui/react-app/src/types/types.ts b/pkg/ui/react-app/src/types/types.ts
@@ -10,6 +10,9 @@ export interface Histogram {
   buckets?: [number, string, string, string][];
 }
 
+export type SampleValue = [number, string];
+export type SampleHistogram = [number, Histogram];
+
 export interface QueryParams {
   startTime: number;
   endTime: number;