From 283c1c7dbe01efdd535a92c7b3d1d9d94536065b Mon Sep 17 00:00:00 2001
From: Domas <domasx2@gmail.com>
Date: Fri, 26 May 2023 13:50:42 +0300
Subject: [PATCH] SparklineCell: Allow specifying time range (#69130)

add timeRange optional prop to Table and TablePanel
---
 packages/grafana-ui/src/components/Table/SparklineCell.tsx | 4 ++--
 packages/grafana-ui/src/components/Table/Table.tsx         | 4 +++-
 packages/grafana-ui/src/components/Table/TableCell.tsx     | 6 +++++-
 packages/grafana-ui/src/components/Table/types.ts          | 4 +++-
 public/app/plugins/panel/table/TablePanel.tsx              | 3 ++-
 5 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/SparklineCell.tsx b/packages/grafana-ui/src/components/Table/SparklineCell.tsx
index 73eceb76cb0..d91ba727744 100644
--- a/packages/grafana-ui/src/components/Table/SparklineCell.tsx
+++ b/packages/grafana-ui/src/components/Table/SparklineCell.tsx
@@ -29,8 +29,7 @@ export const defaultSparklineCellConfig: GraphFieldConfig = {
 };
 
 export const SparklineCell = (props: TableCellProps) => {
-  const { field, innerWidth, tableStyles, cell, cellProps } = props;
-
+  const { field, innerWidth, tableStyles, cell, cellProps, timeRange } = props;
   const sparkline = getSparkline(cell.value);
 
   if (!sparkline) {
@@ -45,6 +44,7 @@ export const SparklineCell = (props: TableCellProps) => {
   sparkline.y.config.min = range.min;
   sparkline.y.config.max = range.max;
   sparkline.y.state = { range };
+  sparkline.timeRange = timeRange;
 
   const cellOptions = getTableSparklineCellOptions(field);
 
diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx
index be2ed09f413..d3cd40f6b71 100644
--- a/packages/grafana-ui/src/components/Table/Table.tsx
+++ b/packages/grafana-ui/src/components/Table/Table.tsx
@@ -54,6 +54,7 @@ export const Table = memo((props: Props) => {
     footerValues,
     enablePagination,
     cellHeight = TableCellHeight.Sm,
+    timeRange,
   } = props;
 
   const listRef = useRef<VariableSizeList>(null);
@@ -258,12 +259,13 @@ export const Table = memo((props: Props) => {
               onCellFilterAdded={onCellFilterAdded}
               columnIndex={index}
               columnCount={row.cells.length}
+              timeRange={timeRange}
             />
           ))}
         </div>
       );
     },
-    [onCellFilterAdded, page, enablePagination, prepareRow, rows, tableStyles, renderSubTable]
+    [onCellFilterAdded, page, enablePagination, prepareRow, rows, tableStyles, renderSubTable, timeRange]
   );
 
   const onNavigate = useCallback(
diff --git a/packages/grafana-ui/src/components/Table/TableCell.tsx b/packages/grafana-ui/src/components/Table/TableCell.tsx
index 620e542a14d..ef8f18f18af 100644
--- a/packages/grafana-ui/src/components/Table/TableCell.tsx
+++ b/packages/grafana-ui/src/components/Table/TableCell.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { Cell } from 'react-table';
 
+import { TimeRange } from '@grafana/data';
+
 import { TableStyles } from './styles';
 import { GrafanaTableColumn, TableFilterActionCallback } from './types';
 
@@ -10,10 +12,11 @@ export interface Props {
   onCellFilterAdded?: TableFilterActionCallback;
   columnIndex: number;
   columnCount: number;
+  timeRange?: TimeRange;
   userProps?: object;
 }
 
-export const TableCell = ({ cell, tableStyles, onCellFilterAdded, userProps }: Props) => {
+export const TableCell = ({ cell, tableStyles, onCellFilterAdded, timeRange, userProps }: Props) => {
   const cellProps = cell.getCellProps();
   const field = (cell.column as unknown as GrafanaTableColumn).field;
 
@@ -34,6 +37,7 @@ export const TableCell = ({ cell, tableStyles, onCellFilterAdded, userProps }: P
     onCellFilterAdded,
     cellProps,
     innerWidth,
+    timeRange,
     userProps,
   }) as React.ReactElement;
 };
diff --git a/packages/grafana-ui/src/components/Table/types.ts b/packages/grafana-ui/src/components/Table/types.ts
index 0fbbb911428..fd2cb55dba9 100644
--- a/packages/grafana-ui/src/components/Table/types.ts
+++ b/packages/grafana-ui/src/components/Table/types.ts
@@ -2,7 +2,7 @@ import { Property } from 'csstype';
 import { FC } from 'react';
 import { CellProps, Column, Row, TableState, UseExpandedRowProps } from 'react-table';
 
-import { DataFrame, Field, KeyValue, SelectableValue } from '@grafana/data';
+import { DataFrame, Field, KeyValue, SelectableValue, TimeRange } from '@grafana/data';
 import { TableCellHeight } from '@grafana/schema';
 
 import { TableStyles } from './styles';
@@ -87,4 +87,6 @@ export interface Props {
   cellHeight?: TableCellHeight;
   /** @alpha */
   subData?: DataFrame[];
+  /** @alpha Used by SparklineCell when provided */
+  timeRange?: TimeRange;
 }
diff --git a/public/app/plugins/panel/table/TablePanel.tsx b/public/app/plugins/panel/table/TablePanel.tsx
index f43839882f6..45ea21b0443 100644
--- a/public/app/plugins/panel/table/TablePanel.tsx
+++ b/public/app/plugins/panel/table/TablePanel.tsx
@@ -11,7 +11,7 @@ import { Options } from './panelcfg.gen';
 interface Props extends PanelProps<Options> {}
 
 export function TablePanel(props: Props) {
-  const { data, height, width, options, fieldConfig, id } = props;
+  const { data, height, width, options, fieldConfig, id, timeRange } = props;
 
   const theme = useTheme2();
   const panelContext = usePanelContext();
@@ -54,6 +54,7 @@ export function TablePanel(props: Props) {
       enablePagination={options.footer?.enablePagination}
       subData={subData}
       cellHeight={options.cellHeight}
+      timeRange={timeRange}
     />
   );