From b8d228a339ed0c34007fd5f24dad306b25bba568 Mon Sep 17 00:00:00 2001 From: SagarRajput-7 <162284829+SagarRajput-7@users.noreply.github.com> Date: Mon, 9 Sep 2024 22:05:05 +0530 Subject: [PATCH] fix: make header sticky for table panel (#5892) * fix: make header sticky for table panel * fix: added sticky prop conditionally and updated test cases * fix: added a smaller scrollbar --------- Co-authored-by: Srikanth Chekuri --- .../src/container/GridPanelSwitch/index.tsx | 1 + .../container/GridTableComponent/index.tsx | 2 ++ .../src/container/GridTableComponent/types.ts | 1 + .../src/container/LogsExplorerTable/index.tsx | 1 + .../Tabs/Overview/TopOperationMetrics.tsx | 1 + .../PanelWrapper/TablePanelWrapper.tsx | 2 ++ .../TablePanelWrapper.test.tsx.snap | 32 ++++++++++++------- .../QueryTable/QueryTable.intefaces.ts | 1 + .../QueryTable/QueryTable.styles.scss | 24 ++++++++------ .../src/container/QueryTable/QueryTable.tsx | 2 ++ .../TracesExplorer/TableView/index.tsx | 1 + 11 files changed, 48 insertions(+), 20 deletions(-) diff --git a/frontend/src/container/GridPanelSwitch/index.tsx b/frontend/src/container/GridPanelSwitch/index.tsx index 641f06e885..24fbde3c85 100644 --- a/frontend/src/container/GridPanelSwitch/index.tsx +++ b/frontend/src/container/GridPanelSwitch/index.tsx @@ -40,6 +40,7 @@ const GridPanelSwitch = forwardRef< data: panelData, query, thresholds, + sticky: true, }, [PANEL_TYPES.LIST]: null, [PANEL_TYPES.PIE]: null, diff --git a/frontend/src/container/GridTableComponent/index.tsx b/frontend/src/container/GridTableComponent/index.tsx index fab4d85e8b..676a745b65 100644 --- a/frontend/src/container/GridTableComponent/index.tsx +++ b/frontend/src/container/GridTableComponent/index.tsx @@ -23,6 +23,7 @@ function GridTableComponent({ thresholds, columnUnits, tableProcessedDataRef, + sticky, ...props }: GridTableComponentProps): JSX.Element { const { t } = useTranslation(['valueGraph']); @@ -146,6 +147,7 @@ function GridTableComponent({ loading={false} columns={newColumnData} dataSource={dataSource} + sticky={sticky} // eslint-disable-next-line react/jsx-props-no-spreading {...props} /> diff --git a/frontend/src/container/GridTableComponent/types.ts b/frontend/src/container/GridTableComponent/types.ts index 25ca647933..6088f9dcb8 100644 --- a/frontend/src/container/GridTableComponent/types.ts +++ b/frontend/src/container/GridTableComponent/types.ts @@ -13,6 +13,7 @@ export type GridTableComponentProps = { thresholds?: ThresholdProps[]; columnUnits?: ColumnUnit; tableProcessedDataRef?: React.MutableRefObject; + sticky?: TableProps['sticky']; } & Pick & Omit, 'columns' | 'dataSource'>; diff --git a/frontend/src/container/LogsExplorerTable/index.tsx b/frontend/src/container/LogsExplorerTable/index.tsx index 13883d3a62..e65bd61464 100644 --- a/frontend/src/container/LogsExplorerTable/index.tsx +++ b/frontend/src/container/LogsExplorerTable/index.tsx @@ -30,6 +30,7 @@ function LogsExplorerTable({ queryTableData={data} loading={isLoading} rootClassName="logs-table" + sticky /> ); } diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperationMetrics.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperationMetrics.tsx index 22224862a4..ed77512d89 100644 --- a/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperationMetrics.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperationMetrics.tsx @@ -114,6 +114,7 @@ function TopOperationMetrics(): JSX.Element { loading={isLoading} renderColumnCell={renderColumnCell} downloadOption={topOperationMetricsDownloadOptions} + sticky /> ); } diff --git a/frontend/src/container/PanelWrapper/TablePanelWrapper.tsx b/frontend/src/container/PanelWrapper/TablePanelWrapper.tsx index db2098554a..0eab4143a2 100644 --- a/frontend/src/container/PanelWrapper/TablePanelWrapper.tsx +++ b/frontend/src/container/PanelWrapper/TablePanelWrapper.tsx @@ -1,3 +1,4 @@ +import { PANEL_TYPES } from 'constants/queryBuilder'; import GridTableComponent from 'container/GridTableComponent'; import { GRID_TABLE_CONFIG } from 'container/GridTableComponent/config'; @@ -18,6 +19,7 @@ function TablePanelWrapper({ thresholds={thresholds} columnUnits={widget.columnUnits} tableProcessedDataRef={tableProcessedDataRef} + sticky={widget.panelTypes === PANEL_TYPES.TABLE} // eslint-disable-next-line react/jsx-props-no-spreading {...GRID_TABLE_CONFIG} /> diff --git a/frontend/src/container/PanelWrapper/__tests__/__snapshots__/TablePanelWrapper.test.tsx.snap b/frontend/src/container/PanelWrapper/__tests__/__snapshots__/TablePanelWrapper.test.tsx.snap index d37ccf5841..1a930f740c 100644 --- a/frontend/src/container/PanelWrapper/__tests__/__snapshots__/TablePanelWrapper.test.tsx.snap +++ b/frontend/src/container/PanelWrapper/__tests__/__snapshots__/TablePanelWrapper.test.tsx.snap @@ -70,20 +70,13 @@ exports[`Table panel wrappper tests table should render fine with the query resp class="ant-table-container" >
- - - - + @@ -222,6 +215,23 @@ exports[`Table panel wrappper tests table should render fine with the query resp +
+
+
+ + + + + diff --git a/frontend/src/container/QueryTable/QueryTable.intefaces.ts b/frontend/src/container/QueryTable/QueryTable.intefaces.ts index f73c407d85..7576d796ec 100644 --- a/frontend/src/container/QueryTable/QueryTable.intefaces.ts +++ b/frontend/src/container/QueryTable/QueryTable.intefaces.ts @@ -18,4 +18,5 @@ export type QueryTableProps = Omit< downloadOption?: DownloadOptions; columns?: ColumnsType; dataSource?: RowData[]; + sticky?: TableProps['sticky']; }; diff --git a/frontend/src/container/QueryTable/QueryTable.styles.scss b/frontend/src/container/QueryTable/QueryTable.styles.scss index e78a4df239..e116356f9d 100644 --- a/frontend/src/container/QueryTable/QueryTable.styles.scss +++ b/frontend/src/container/QueryTable/QueryTable.styles.scss @@ -1,10 +1,16 @@ .query-table { - position: relative; - height: inherit; - .query-table--download { - position: absolute; - top: 15px; - right: 0px; - z-index: 1; - } -} \ No newline at end of file + position: relative; + height: inherit; + .query-table--download { + position: absolute; + top: 15px; + right: 0px; + z-index: 1; + } + + .ant-table { + &::-webkit-scrollbar { + width: 0.1rem; + } + } +} diff --git a/frontend/src/container/QueryTable/QueryTable.tsx b/frontend/src/container/QueryTable/QueryTable.tsx index ccf8221bfe..1786e5d4e3 100644 --- a/frontend/src/container/QueryTable/QueryTable.tsx +++ b/frontend/src/container/QueryTable/QueryTable.tsx @@ -19,6 +19,7 @@ export function QueryTable({ downloadOption, columns, dataSource, + sticky, ...props }: QueryTableProps): JSX.Element { const { isDownloadEnabled = false, fileName = '' } = downloadOption || {}; @@ -71,6 +72,7 @@ export function QueryTable({ dataSource={newDataSource} scroll={{ x: true }} pagination={paginationConfig} + sticky={sticky} // eslint-disable-next-line react/jsx-props-no-spreading {...props} /> diff --git a/frontend/src/container/TracesExplorer/TableView/index.tsx b/frontend/src/container/TracesExplorer/TableView/index.tsx index 775db816c4..849ea9bd8f 100644 --- a/frontend/src/container/TracesExplorer/TableView/index.tsx +++ b/frontend/src/container/TracesExplorer/TableView/index.tsx @@ -47,6 +47,7 @@ function TableView(): JSX.Element { query={stagedQuery || initialQueriesMap.traces} queryTableData={data?.payload?.data?.newResult?.data?.result || []} loading={isLoading} + sticky /> );