From 6c021f7bb915fb87ebde9a07869d745a2ef50fee Mon Sep 17 00:00:00 2001 From: Ryan McKinley Date: Thu, 16 Apr 2020 12:35:58 -0700 Subject: [PATCH] Table: add a select option when multiple tables exist (#23545) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * add a table picker * move picker to the top * add missing change * Removed overflow from panel-content so dropdown menus can extend a panel, moved the select to the bottom Co-authored-by: Torkel Ödegaard --- packages/grafana-data/src/types/theme.ts | 2 +- .../grafana-ui/src/components/Input/Input.tsx | 2 +- .../SingleStatShared/SingleStatBaseOptions.ts | 2 +- .../components/TimePicker/TimeOfDayPicker.tsx | 2 +- .../TimeRangePicker.test.tsx.snap | 4 +- packages/grafana-ui/src/themes/default.ts | 2 +- .../QueryOperationRow/QueryOperationRow.tsx | 4 +- public/app/plugins/panel/news/NewsPanel.tsx | 28 ++++----- public/app/plugins/panel/table/TablePanel.tsx | 63 ++++++++++++++++--- public/app/plugins/panel/table/types.ts | 1 + public/sass/pages/_dashboard.scss | 16 ++--- 11 files changed, 83 insertions(+), 43 deletions(-) diff --git a/packages/grafana-data/src/types/theme.ts b/packages/grafana-data/src/types/theme.ts index fc73c71f2ba..51ae18338be 100644 --- a/packages/grafana-data/src/types/theme.ts +++ b/packages/grafana-data/src/types/theme.ts @@ -67,7 +67,7 @@ export interface GrafanaThemeCommons { formSpacingBase: number; formMargin: string; formFieldsetMargin: string; - formInputHeight: string; + formInputHeight: number; formButtonHeight: number; formInputPaddingHorizontal: string; // Used for icons do define spacing between icon and input field diff --git a/packages/grafana-ui/src/components/Input/Input.tsx b/packages/grafana-ui/src/components/Input/Input.tsx index 8996a281a6e..fbdd6a8fd7d 100644 --- a/packages/grafana-ui/src/components/Input/Input.tsx +++ b/packages/grafana-ui/src/components/Input/Input.tsx @@ -57,7 +57,7 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false }: StyleDe label: input-wrapper; display: flex; width: 100%; - height: ${height}; + height: ${height}px; border-radius: ${borderRadius}; &:hover { > .prefix, diff --git a/packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts b/packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts index c8ee2408eef..e54294911f3 100644 --- a/packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts +++ b/packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts @@ -133,7 +133,7 @@ export function sharedSingleStatMigrationHandler(panel: PanelModel { background-color: ${bgColor}; border-radius: ${borderRadius}; border-color: ${borderColor}; - height: ${theme.spacing.formInputHeight}; + height: ${theme.spacing.formInputHeight}px; &:focus { ${getFocusCss(theme)} diff --git a/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap b/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap index 7d193bea85a..e615246ef7a 100644 --- a/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap +++ b/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap @@ -199,7 +199,7 @@ exports[`TimePicker renders buttons correctly 1`] = ` "formButtonHeight": 32, "formFieldsetMargin": "16px", "formInputAffixPaddingHorizontal": "4px", - "formInputHeight": "32px", + "formInputHeight": 32, "formInputMargin": "16px", "formInputPaddingHorizontal": "8px", "formLabelMargin": "0 0 4px 0", @@ -515,7 +515,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = ` "formButtonHeight": 32, "formFieldsetMargin": "16px", "formInputAffixPaddingHorizontal": "4px", - "formInputHeight": "32px", + "formInputHeight": 32, "formInputMargin": "16px", "formInputPaddingHorizontal": "8px", "formLabelMargin": "0 0 4px 0", diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts index 199471ff302..c25d12b147d 100644 --- a/packages/grafana-ui/src/themes/default.ts +++ b/packages/grafana-ui/src/themes/default.ts @@ -89,7 +89,7 @@ const theme: GrafanaThemeCommons = { formSpacingBase: SPACING_BASE, formMargin: `${SPACING_BASE * 4}px`, formFieldsetMargin: `${SPACING_BASE * 2}px`, - formInputHeight: `${SPACING_BASE * 4}px`, + formInputHeight: SPACING_BASE * 4, formButtonHeight: SPACING_BASE * 4, formInputPaddingHorizontal: `${SPACING_BASE}px`, diff --git a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx index 684c3b7b034..35041c210a1 100644 --- a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx +++ b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx @@ -80,8 +80,8 @@ const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => { padding: 0 ${theme.spacing.sm}; border-radius: ${theme.border.radius.sm}; background: ${theme.colors.bg2}; - height: ${theme.spacing.formInputHeight}; - line-height: ${theme.spacing.formInputHeight}; + height: ${theme.spacing.formInputHeight}px; + line-height: ${theme.spacing.formInputHeight}px; display: flex; align-items: center; justify-content: space-between; diff --git a/public/app/plugins/panel/news/NewsPanel.tsx b/public/app/plugins/panel/news/NewsPanel.tsx index 0d9c1bb08b9..8286ee6cc48 100755 --- a/public/app/plugins/panel/news/NewsPanel.tsx +++ b/public/app/plugins/panel/news/NewsPanel.tsx @@ -74,21 +74,19 @@ export class NewsPanel extends PureComponent { } return ( -
- - {news.map((item, index) => { - return ( - + + {news.map((item, index) => { + return ( +
+ +
{item.title}
+
{dateTime(item.date).format('MMM DD')}
+ +
+
+ ); + })} + ); } } diff --git a/public/app/plugins/panel/table/TablePanel.tsx b/public/app/plugins/panel/table/TablePanel.tsx index 74d6bd21686..49ae910ac95 100644 --- a/public/app/plugins/panel/table/TablePanel.tsx +++ b/public/app/plugins/panel/table/TablePanel.tsx @@ -1,8 +1,10 @@ import React, { Component } from 'react'; -import { Table } from '@grafana/ui'; -import { Field, FieldMatcherID, PanelProps } from '@grafana/data'; +import { Table, Select } from '@grafana/ui'; +import { Field, FieldMatcherID, PanelProps, DataFrame, SelectableValue } from '@grafana/data'; import { Options } from './types'; +import { css } from 'emotion'; +import { config } from 'app/core/config'; interface Props extends PanelProps {} @@ -30,20 +32,65 @@ export class TablePanel extends Component { }); }; + onChangeTableSelection = (val: SelectableValue) => { + this.props.onOptionsChange({ + ...this.props.options, + frameIndex: val.value || 0, + }); + + // Force a redraw -- but no need to re-query + this.forceUpdate(); + }; + + renderTable(frame: DataFrame, width: number, height: number) { + const { + options: { showHeader, resizable }, + } = this.props; + return ; + } + render() { const { data, height, width, - options: { showHeader, resizable }, + options: { frameIndex }, } = this.props; - if (data.series.length < 1) { - return
No Table Data...
; + const count = data.series?.length; + + if (!count || count < 1) { + return
No data
; } - return ( -
- ); + if (count > 1) { + const inputHeight = config.theme.spacing.formInputHeight; + const padding = 8; + const index = frameIndex > 0 && frameIndex < count ? frameIndex : 0; + const names = data.series.map((frame, index) => { + return { + label: `${frame.name ?? 'Series'}`, + value: index, + }; + }); + + return ( +
+ {this.renderTable(data.series[index], width, height - inputHeight - padding)} +