refactor: Reuse AsyncTable in Pods table

tiithansen · Jun 10, 2024 · 418d6ea · 418d6ea
1 parent c337b33
commit 418d6ea
Show file tree

Hide file tree

Showing 10 changed files with 295 additions and 367 deletions.
diff --git a/src/common/types.ts b/src/common/types.ts
@@ -0,0 +1,3 @@
+import { GrafanaTheme2 } from "@grafana/data";
+
+export type TextColor = keyof GrafanaTheme2['colors']['text'] | 'error' | 'success' | 'warning' | 'info'
diff --git a/src/components/AsyncTable/index.tsx b/src/components/AsyncTable/index.tsx
@@ -16,19 +16,22 @@ import { resolveVariable } from 'common/variableHelpers';
 import { CellContext, ColumnDef, ColumnSort, Row } from '@tanstack/react-table';
 import { FormattedCell } from 'pages/Workloads/components/FormattedCell';
 import { SortingState } from 'common/sortingHelpers';
+import { TextColor } from 'common/types';
+import { isFunction } from 'lodash';
 
-export type CellType = 'link' | 'formatted'
+export type CellType = 'link' | 'formatted' | 'custom'
 
-type LinkCellProps = {
-    urlBuilder?: (value: any) => string;
+type LinkCellProps<TableRow> = {
+    urlBuilder?: (value: TableRow) => string;
 }
 
-export type FormattedCellProps = {
+export type FormattedCellProps<TableRow> = {
     decimals?: number;
     format?: string;
+    color?: TextColor | ((row: TableRow) => TextColor)
 }
 
-export type CellProps = LinkCellProps | FormattedCellProps;
+export type CellProps<TableRow> = LinkCellProps<TableRow> | FormattedCellProps<TableRow>;
 
 export interface ColumnSortingConfig<TableRow> {
     enabled: boolean;
@@ -42,11 +45,17 @@ export interface Column<TableRow> {
     header: string;
     accessor?: (row: TableRow) => any;
     cellType?: CellType;
-    cellProps?: CellProps;
+    cellProps?: CellProps<TableRow>;
+    cellBuilder?: (row: TableRow) => React.JSX.Element;
     sortingConfig: ColumnSortingConfig<TableRow>;
     columns?: Array<Column<TableRow>>;
 }
 
+export interface QueryBuilder<TableRow> {
+    rootQueryBuilder: (variables: SceneVariables | SceneVariableSet, sorting: SortingState, sortingConfig: ColumnSortingConfig<TableRow>) => any;
+    rowQueryBuilder: (rows: TableRow[], variables: SceneVariables | SceneVariableSet) => any;
+}
+
 interface TableState<TableRow> extends SceneObjectState {
     expandedRows?: SceneObject[];
     asyncRowData?: Map<string, number[]>;
@@ -55,9 +64,8 @@ interface TableState<TableRow> extends SceneObjectState {
     columns: Array<Column<TableRow>>;
     createRowId: (row: TableRow) => string;
     asyncDataRowMapper: (row: TableRow, asyncRowData: any) => void;
-    rootQueryBuilder: (variables: SceneVariables | SceneVariableSet, sorting: SortingState, sortingConfig: ColumnSortingConfig<TableRow>) => any;
-    rowQueryBuilder: (rows: TableRow[], variables: SceneVariables | SceneVariableSet) => any;
     expandedRowBuilder?: (row: TableRow) => SceneObject;
+    queryBuilder: QueryBuilder<TableRow>;
 }
 
 interface ExpandedRowProps<TableRow> {
@@ -85,16 +93,23 @@ function mapColumn<TableRow>(column: Column<TableRow>): ColumnDef<TableRow> {
     let cell = undefined;
     switch (column.cellType) {
         case 'link':
-            cell = (props: CellContext<TableRow, any>) => LinkCell('namespaces', props.row.getValue(column.id))
+            const linkCellProps = column.cellProps as LinkCellProps<TableRow>;
+            cell = (props: CellContext<TableRow, any>) => LinkCell(linkCellProps.urlBuilder ? linkCellProps.urlBuilder(props.row.original) : '', props.row.getValue(column.id))
             break;
         case 'formatted':
-            const formattedCellProps = column.cellProps as FormattedCellProps;
+            const formattedCellProps = column.cellProps as FormattedCellProps<TableRow>;
             cell = (props: CellContext<TableRow, any>) => FormattedCell({
                 value: props.row.getValue(column.id),
                 decimals: formattedCellProps.decimals,
                 format: formattedCellProps.format,
+                color: (formattedCellProps.color && isFunction(formattedCellProps.color)) 
+                    ? formattedCellProps.color(props.row.original)
+                    : formattedCellProps.color,
             })
             break;
+        case 'custom':
+            cell = (props: CellContext<TableRow, any>) => column.cellBuilder!(props.row.original)
+            break;
     }
 
     return {
@@ -170,7 +185,7 @@ export class AsyncTable<TableRow> extends SceneObjectBase<TableState<TableRow>>
             },
 
             queries: [
-                ...this.state.rowQueryBuilder(rows.map(row => row.original), sceneVariables),
+                ...this.state.queryBuilder.rowQueryBuilder(rows.map(row => row.original), sceneVariables),
             ],
             $timeRange: timeRange.clone(),
         }).then((data) => {
@@ -195,7 +210,7 @@ export class AsyncTable<TableRow> extends SceneObjectBase<TableState<TableRow>>
             const sortingConfig = this.getColumnById(newSortingState.columnId)?.sortingConfig;
 
             if (sortingConfig && sortingConfig.local === false) {
-                newState.$data = this.state.rootQueryBuilder(sceneGraph.getVariables(this), newSortingState, sortingConfig)
+                newState.$data = this.state.queryBuilder.rootQueryBuilder(sceneGraph.getVariables(this), newSortingState, sortingConfig)
             }
 
             this.setState(newState)

diff --git a/src/components/ResourceBreakdownTable/index.tsx b/src/components/ResourceBreakdownTable/index.tsx
@@ -385,8 +385,10 @@ export const ResourceBreakdownTable = () => {
                         createRowId: (row) => `${row.namespace}:${row.cluster}`,
                         asyncDataRowMapper: rowMapper,
                         $data: createRootQuery(variables, defaultSorting),
-                        rowQueryBuilder: createRowQueries,
-                        rootQueryBuilder: createRootQuery,
+                        queryBuilder: {
+                            rowQueryBuilder: createRowQueries,
+                            rootQueryBuilder: createRootQuery,
+                        }
                     }),
                 }),
             ],

diff --git a/src/pages/Clusters/tabs/Nodes/Nodes.tsx b/src/pages/Clusters/tabs/Nodes/Nodes.tsx
@@ -22,8 +22,9 @@ import { getSeriesValue } from 'common/seriesHelpers';
 import { createClusterVariable, resolveVariable } from 'common/variableHelpers';
 import { LinkCell } from 'pages/Workloads/components/LinkCell';
 import { CellContext } from '@tanstack/react-table';
-import { FormattedCell, TextColor } from 'pages/Workloads/components/FormattedCell';
+import { FormattedCell } from 'pages/Workloads/components/FormattedCell';
 import { Metrics } from 'metrics/metrics';
+import { TextColor } from 'common/types';
 
 const clusterVariable = createClusterVariable();
 

diff --git a/src/pages/Workloads/components/ContainersCell.tsx b/src/pages/Workloads/components/ContainersCell.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text } from '@grafana/ui';
 
-export const ContainersCellBuilder = ({ total, ready }: { total: number, ready: number }) => {
+export const ContainersCell = ({ total, ready }: { total: number, ready: number }) => {
 
     return (
         <span>

diff --git a/src/pages/Workloads/components/FormattedCell.tsx b/src/pages/Workloads/components/FormattedCell.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import { Text } from '@grafana/ui';
-import { GrafanaTheme2, getValueFormat } from '@grafana/data';
-
-export type TextColor = keyof GrafanaTheme2['colors']['text'] | 'error' | 'success' | 'warning' | 'info'
+import { getValueFormat } from '@grafana/data';
+import { TextColor } from 'common/types';
 
 export interface FormattedCellProps {
     color?: TextColor;

diff --git a/src/pages/Workloads/components/LinkCell.tsx b/src/pages/Workloads/components/LinkCell.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { TextLink } from "@grafana/ui";
 
-export function LinkCell(url: string, id: string) {
-    return (<TextLink color="primary" href={`${url}/${id}${window.location.search}`}>{ id }</TextLink>);
+export function LinkCell(url: string, text: string) {
+    return (<TextLink color="primary" href={`${url}${window.location.search}`}>{ text }</TextLink>);
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { GrafanaTheme2 } from "@grafana/data";

		export type TextColor = keyof GrafanaTheme2['colors']['text'] \| 'error' \| 'success' \| 'warning' \| 'info'