From e5d7be3e1c4d4836ad1e3a44e17ec10f195c6583 Mon Sep 17 00:00:00 2001 From: Ryan McKinley Date: Tue, 9 Nov 2021 08:10:21 -0800 Subject: [PATCH] TablePanel: support hiding columns, but use them in DataLinks (#41443) --- packages/grafana-schema/src/schema/graph.gen.ts | 1 + packages/grafana-schema/src/schema/table.cue | 1 + packages/grafana-ui/src/components/Table/utils.ts | 5 +++-- public/app/plugins/panel/table/models.cue | 8 +------- public/app/plugins/panel/table/models.gen.ts | 11 ++--------- public/app/plugins/panel/table/module.tsx | 11 +++++++++-- public/app/plugins/panel/table/suggestions.ts | 5 +++-- 7 files changed, 20 insertions(+), 22 deletions(-) diff --git a/packages/grafana-schema/src/schema/graph.gen.ts b/packages/grafana-schema/src/schema/graph.gen.ts index 0c2df46280c..c6c8e20ac17 100644 --- a/packages/grafana-schema/src/schema/graph.gen.ts +++ b/packages/grafana-schema/src/schema/graph.gen.ts @@ -274,6 +274,7 @@ export interface TableFieldOptions { hidden?: boolean; minWidth?: number; width?: number; + filterable?: boolean; } export const defaultTableFieldOptions: TableFieldOptions = { diff --git a/packages/grafana-schema/src/schema/table.cue b/packages/grafana-schema/src/schema/table.cue index 47285e8df34..e62dbb3d561 100644 --- a/packages/grafana-schema/src/schema/table.cue +++ b/packages/grafana-schema/src/schema/table.cue @@ -11,4 +11,5 @@ TableFieldOptions: { align: FieldTextAlignment | *"auto" displayMode: TableCellDisplayMode | *"auto" hidden?: bool // ?? default is missing or false ?? + filterable?: bool } @cuetsy(kind="interface") diff --git a/packages/grafana-ui/src/components/Table/utils.ts b/packages/grafana-ui/src/components/Table/utils.ts index 4a865bc00ec..79d9cee4787 100644 --- a/packages/grafana-ui/src/components/Table/utils.ts +++ b/packages/grafana-ui/src/components/Table/utils.ts @@ -49,7 +49,7 @@ export function getColumns( footerValues?: FooterItem[] ): Column[] { const columns: any[] = []; - let fieldCountWithoutWidth = data.fields.length; + let fieldCountWithoutWidth = 0; for (const [fieldIndex, field] of data.fields.entries()) { const fieldTableOptions = (field.config.custom || {}) as TableFieldOptions; @@ -60,7 +60,8 @@ export function getColumns( if (fieldTableOptions.width) { availableWidth -= fieldTableOptions.width; - fieldCountWithoutWidth -= 1; + } else { + fieldCountWithoutWidth++; } const selectSortType = (type: FieldType): string => { diff --git a/public/app/plugins/panel/table/models.cue b/public/app/plugins/panel/table/models.cue index 1a4d7049249..5d4b481ec8a 100644 --- a/public/app/plugins/panel/table/models.cue +++ b/public/app/plugins/panel/table/models.cue @@ -28,13 +28,7 @@ Panel: { showTypeIcons: bool | *false sortBy?: [...ui.TableSortByFieldState] } - PanelFieldConfig: { - width?: int - minWidth?: int - align?: string | *"auto" - displayMode?: string | *"auto" // TODO? TableCellDisplayMode - filterable?: bool - } + PanelFieldConfig: ui.TableFieldOptions }, ] ] diff --git a/public/app/plugins/panel/table/models.gen.ts b/public/app/plugins/panel/table/models.gen.ts index 9a2f5462fbb..a1eee4e24f8 100644 --- a/public/app/plugins/panel/table/models.gen.ts +++ b/public/app/plugins/panel/table/models.gen.ts @@ -4,6 +4,7 @@ //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ import { TableCellDisplayMode, TableSortByFieldState } from '@grafana/ui'; +import { TableFieldOptions } from '@grafana/schema'; // Only the latest schema version is translated to TypeScript, on the premise // that either the dashboard loading process, or (eventually) CUE-defined @@ -35,15 +36,7 @@ export const defaultPanelOptions: PanelOptions = { }, }; -export interface PanelFieldConfig { - width?: number; - minWidth?: number; - align?: string; - displayMode?: TableCellDisplayMode; - filterable?: boolean; -} - -export const defaultPanelFieldConfig: PanelFieldConfig = { +export const defaultPanelFieldConfig: TableFieldOptions = { displayMode: TableCellDisplayMode.Auto, align: 'auto', }; diff --git a/public/app/plugins/panel/table/module.tsx b/public/app/plugins/panel/table/module.tsx index a1d41d6ffd6..dbf33ba6187 100644 --- a/public/app/plugins/panel/table/module.tsx +++ b/public/app/plugins/panel/table/module.tsx @@ -7,12 +7,13 @@ import { standardEditorsRegistry, } from '@grafana/data'; import { TablePanel } from './TablePanel'; -import { PanelOptions, PanelFieldConfig, defaultPanelOptions, defaultPanelFieldConfig } from './models.gen'; +import { PanelOptions, defaultPanelOptions, defaultPanelFieldConfig } from './models.gen'; +import { TableFieldOptions } from '@grafana/schema'; import { tableMigrationHandler, tablePanelChangedHandler } from './migrations'; import { TableCellDisplayMode } from '@grafana/ui'; import { TableSuggestionsSupplier } from './suggestions'; -export const plugin = new PanelPlugin(TablePanel) +export const plugin = new PanelPlugin(TablePanel) .setPanelChangeHandler(tablePanelChangedHandler) .setMigrationHandler(tableMigrationHandler) .setNoPadding() @@ -79,6 +80,12 @@ export const plugin = new PanelPlugin(TablePanel name: 'Column filter', description: 'Enables/disables field filters in table', defaultValue: defaultPanelFieldConfig.filterable, + }) + .addBooleanSwitch({ + path: 'hidden', + name: 'Hide in table', + defaultValue: undefined, + hideFromDefaults: true, }); }, }) diff --git a/public/app/plugins/panel/table/suggestions.ts b/public/app/plugins/panel/table/suggestions.ts index 8f1f9bfa89d..1ddb7cd8690 100644 --- a/public/app/plugins/panel/table/suggestions.ts +++ b/public/app/plugins/panel/table/suggestions.ts @@ -1,10 +1,11 @@ import { VisualizationSuggestionsBuilder } from '@grafana/data'; +import { TableFieldOptions } from '@grafana/schema'; import { SuggestionName } from 'app/types/suggestions'; -import { PanelOptions, PanelFieldConfig } from './models.gen'; +import { PanelOptions } from './models.gen'; export class TableSuggestionsSupplier { getSuggestionsForData(builder: VisualizationSuggestionsBuilder) { - const list = builder.getListAppender({ + const list = builder.getListAppender({ name: '', pluginId: 'table', options: {},