From bdb592d9ec9d4a2ae4a1de7c05bbb3cebb5cafa9 Mon Sep 17 00:00:00 2001 From: Oscar Kilhed Date: Fri, 2 Feb 2024 16:04:23 +0100 Subject: [PATCH] Scenes: Refactor panel editor tab counts (#81777) * refactor editor tab counts * Capitalize tab component property since it's a component --- .../PanelDataPane/PanelDataAlertingTab.tsx | 35 ++++++++++++++++--- .../PanelDataPane/PanelDataPane.tsx | 16 ++------- .../PanelDataPane/PanelDataQueriesTab.tsx | 35 +++++++++++++++++-- .../PanelDataTransformationsTab.tsx | 31 ++++++++++++++-- .../panel-edit/PanelDataPane/types.ts | 9 +++-- 5 files changed, 101 insertions(+), 25 deletions(-) diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataAlertingTab.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataAlertingTab.tsx index b394b495bc8..d726d5d4b27 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataAlertingTab.tsx +++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataAlertingTab.tsx @@ -1,25 +1,25 @@ import React from 'react'; -import { IconName } from '@grafana/data'; import { SceneObjectBase, SceneComponentProps } from '@grafana/scenes'; -import { Alert, LoadingPlaceholder } from '@grafana/ui'; +import { Alert, LoadingPlaceholder, Tab } from '@grafana/ui'; import { RulesTable } from 'app/features/alerting/unified/components/rules/RulesTable'; import { usePanelCombinedRules } from 'app/features/alerting/unified/hooks/usePanelCombinedRules'; import { getDashboardSceneFor, getPanelIdForVizPanel } from '../../utils/utils'; import { VizPanelManager } from '../VizPanelManager'; -import { PanelDataPaneTabState, PanelDataPaneTab, TabId } from './types'; +import { PanelDataPaneTabState, PanelDataPaneTab, TabId, PanelDataTabHeaderProps } from './types'; export class PanelDataAlertingTab extends SceneObjectBase implements PanelDataPaneTab { static Component = PanelDataAlertingTabRendered; + TabComponent: (props: PanelDataTabHeaderProps) => React.JSX.Element; + tabId = TabId.Alert; - icon: IconName = 'bell'; private _panelManager: VizPanelManager; constructor(panelManager: VizPanelManager) { super({}); - + this.TabComponent = (props: PanelDataTabHeaderProps) => AlertingTab({ ...props, model: this }); this._panelManager = panelManager; } getTabLabel() { @@ -78,3 +78,28 @@ function PanelDataAlertingTabRendered(props: SceneComponentProps ); } + +interface PanelDataAlertingTabHeaderProps extends PanelDataTabHeaderProps { + model: PanelDataAlertingTab; +} + +function AlertingTab(props: PanelDataAlertingTabHeaderProps) { + const { model } = props; + + const { rules } = usePanelCombinedRules({ + dashboardUID: model.getDashboardUID(), + panelId: model.getPanelId(), + poll: false, + }); + + return ( + + ); +} diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataPane.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataPane.tsx index 115e9506979..834ae36e225 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataPane.tsx +++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataPane.tsx @@ -11,7 +11,7 @@ import { SceneObjectUrlValues, VizPanel, } from '@grafana/scenes'; -import { Container, CustomScrollbar, Tab, TabContent, TabsBar, useStyles2 } from '@grafana/ui'; +import { Container, CustomScrollbar, TabContent, TabsBar, useStyles2 } from '@grafana/ui'; import { shouldShowAlertingTab } from 'app/features/dashboard/components/PanelEditor/state/selectors'; import { VizPanelManager } from '../VizPanelManager'; @@ -135,7 +135,6 @@ export class PanelDataPane extends SceneObjectBase { function PanelDataPaneRendered({ model }: SceneComponentProps) { const { tab, tabs } = model.useState(); const styles = useStyles2(getStyles); - const { queries } = model.panelManager.queryRunner.useState(); if (!tabs) { return; @@ -143,25 +142,16 @@ function PanelDataPaneRendered({ model }: SceneComponentProps) { const currentTab = tabs.find((t) => t.tabId === tab); - const tabCounters = { - [TabId.Queries]: queries.length, - [TabId.Transformations]: 0, //TODO - [TabId.Alert]: 0, //TODO - }; - return ( <> {tabs.map((t, index) => { return ( - model.onChangeTab(t)} - /> + > ); })} diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataQueriesTab.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataQueriesTab.tsx index 7ddae1e3d87..164237f0ae2 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataQueriesTab.tsx +++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataQueriesTab.tsx @@ -3,9 +3,9 @@ import React from 'react'; import { CoreApp, DataSourceApi, DataSourceInstanceSettings, IconName } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; import { config } from '@grafana/runtime'; -import { SceneObjectBase, SceneComponentProps, sceneGraph } from '@grafana/scenes'; +import { SceneObjectBase, SceneComponentProps, sceneGraph, SceneQueryRunner } from '@grafana/scenes'; import { DataQuery } from '@grafana/schema'; -import { Button, HorizontalGroup } from '@grafana/ui'; +import { Button, HorizontalGroup, Tab } from '@grafana/ui'; import { addQuery } from 'app/core/utils/query'; import { dataSource as expressionDatasource } from 'app/features/expressions/ExpressionDatasource'; import { GroupActionComponents } from 'app/features/query/components/QueryActionComponent'; @@ -18,7 +18,7 @@ import { QueryGroupOptions } from 'app/types'; import { PanelTimeRange } from '../../scene/PanelTimeRange'; import { VizPanelManager } from '../VizPanelManager'; -import { PanelDataPaneTabState, PanelDataPaneTab, TabId } from './types'; +import { PanelDataPaneTabState, PanelDataPaneTab, TabId, PanelDataTabHeaderProps } from './types'; interface PanelDataQueriesTabState extends PanelDataPaneTabState { datasource?: DataSourceApi; @@ -26,6 +26,7 @@ interface PanelDataQueriesTabState extends PanelDataPaneTabState { } export class PanelDataQueriesTab extends SceneObjectBase implements PanelDataPaneTab { static Component = PanelDataQueriesTabRendered; + TabComponent: (props: PanelDataTabHeaderProps) => React.JSX.Element; tabId = TabId.Queries; icon: IconName = 'database'; @@ -41,6 +42,9 @@ export class PanelDataQueriesTab extends SceneObjectBase { + return QueriesTab({ ...props, model: this }); + }; this._panelManager = panelManager; } @@ -153,6 +157,10 @@ export class PanelDataQueriesTab extends SceneObjectBase ); } + +interface QueriesTabProps extends PanelDataTabHeaderProps { + model: PanelDataQueriesTab; +} + +function QueriesTab(props: QueriesTabProps) { + const { model } = props; + + const queryRunnerState = model.queryRunner.useState(); + + return ( + + ); +} diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataTransformationsTab.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataTransformationsTab.tsx index 4565ea6694d..f10b53be30f 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataTransformationsTab.tsx +++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataTransformationsTab.tsx @@ -5,14 +5,14 @@ import { DragDropContext, DropResult, Droppable } from 'react-beautiful-dnd'; import { DataTransformerConfig, GrafanaTheme2, IconName, PanelData } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; import { SceneObjectBase, SceneComponentProps, SceneDataTransformer, SceneQueryRunner } from '@grafana/scenes'; -import { Button, ButtonGroup, ConfirmModal, useStyles2 } from '@grafana/ui'; +import { Button, ButtonGroup, ConfirmModal, Tab, useStyles2 } from '@grafana/ui'; import { TransformationOperationRows } from 'app/features/dashboard/components/TransformationsEditor/TransformationOperationRows'; import { VizPanelManager } from '../VizPanelManager'; import { EmptyTransformationsMessage } from './EmptyTransformationsMessage'; import { TransformationsDrawer } from './TransformationsDrawer'; -import { PanelDataPaneTabState, PanelDataPaneTab, TabId } from './types'; +import { PanelDataPaneTabState, PanelDataPaneTab, TabId, PanelDataTabHeaderProps } from './types'; interface PanelDataTransformationsTabState extends PanelDataPaneTabState {} @@ -21,6 +21,8 @@ export class PanelDataTransformationsTab implements PanelDataPaneTab { static Component = PanelDataTransformationsTabRendered; + TabComponent: (props: PanelDataTabHeaderProps) => React.JSX.Element; + tabId = TabId.Transformations; icon: IconName = 'process'; private _panelManager: VizPanelManager; @@ -31,6 +33,7 @@ export class PanelDataTransformationsTab constructor(panelManager: VizPanelManager) { super({}); + this.TabComponent = (props: PanelDataTabHeaderProps) => TransformationsTab({ ...props, model: this }); this._panelManager = panelManager; } @@ -46,6 +49,10 @@ export class PanelDataTransformationsTab public onChangeTransformations(transformations: DataTransformerConfig[]) { this._panelManager.changeTransformations(transformations); } + + get panelManager() { + return this._panelManager; + } } export function PanelDataTransformationsTabRendered({ model }: SceneComponentProps) { @@ -186,3 +193,23 @@ const getStyles = (theme: GrafanaTheme2) => ({ marginLeft: theme.spacing(2), }), }); + +interface TransformationsTabProps extends PanelDataTabHeaderProps { + model: PanelDataTransformationsTab; +} + +function TransformationsTab(props: TransformationsTabProps) { + const { model } = props; + + const transformerState = model.getDataTransformer().useState(); + return ( + + ); +} diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/types.ts b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/types.ts index 783ed287dcd..5edff739a16 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/types.ts +++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/types.ts @@ -1,4 +1,3 @@ -import { IconName } from '@grafana/data'; import { SceneObject, SceneObjectState } from '@grafana/scenes'; export interface PanelDataPaneTabState extends SceneObjectState {} @@ -9,8 +8,14 @@ export enum TabId { Alert = 'alert', } +export interface PanelDataTabHeaderProps { + key: string; + active: boolean; + onChangeTab?: (event: React.MouseEvent) => void; +} + export interface PanelDataPaneTab extends SceneObject { + TabComponent: (props: PanelDataTabHeaderProps) => React.JSX.Element; getTabLabel(): string; tabId: TabId; - icon: IconName; }