Skip to content

N
nexpie-grafana-theme
Commit 244c2875 by Peter Holmberg Committed by GitHub
Options

Fix: Update badges on PanelEditor tabs when adding a query/transformation/alert (#27729) 

* minor nits in paneleditor

* add events for queries and transformations

* fix spelling

* add event to alertctrl

* revert alert changes

* re add force update

* reduce events
parent 33663657
Showing with 92 additions and 52 deletions
public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
......@@ -142,7 +142,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
document.body.style.cursor = 'row-resize';
};
onDiplayModeChange = (mode: DisplayMode) => {
onDisplayModeChange = (mode: DisplayMode) => {
const { updatePanelEditorUIState } = this.props;
updatePanelEditorUIState({
mode: mode,
......@@ -184,6 +184,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
</div>
);
};
renderHorizontalSplit(styles: EditorStyles) {
const { dashboard, panel, tabs, uiState } = this.props;
return tabs.length > 0 ? (
......@@ -230,7 +231,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
{this.renderTemplateVariables(styles)}
<HorizontalGroup>
<RadioButtonGroup value={uiState.mode} options={displayModes} onChange={this.onDiplayModeChange} />
<RadioButtonGroup value={uiState.mode} options={displayModes} onChange={this.onDisplayModeChange} />
<DashNavTimeControls
dashboard={dashboard}
location={location}
......@@ -348,7 +349,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
}
}
const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (state, props) => {
const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = state => {
const panel = state.panelEditor.getPanel();
const { plugin } = getPanelStateById(state.dashboard, panel.id);
......
public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
import React, { useCallback } from 'react';
import React, { PureComponent } from 'react';
import { config } from 'app/core/config';
import { css } from 'emotion';
import { IconName, stylesFactory, Tab, TabContent, TabsBar } from '@grafana/ui';
import { PanelEditorTab, PanelEditorTabId } from './types';
import { DashboardModel } from '../../state';
import { QueriesTab } from '../../panel_editor/QueriesTab';
import { PanelModel } from '../../state/PanelModel';
import { AlertTab } from 'app/features/alerting/AlertTab';
import { TransformationsEditor } from '../TransformationsEditor/TransformationsEditor';
import { DashboardModel, PanelModel } from '../../state';
import { CoreEvents } from 'app/types';
import { PanelEditorTab, PanelEditorTabId } from './types';
interface PanelEditorTabsProps {
panel: PanelModel;
......@@ -16,55 +16,73 @@ interface PanelEditorTabsProps {
onChangeTab: (tab: PanelEditorTab) => void;
}
export const PanelEditorTabs: React.FC<PanelEditorTabsProps> = ({ panel, dashboard, tabs, onChangeTab }) => {
const styles = getPanelEditorTabsStyles();
const activeTab = tabs.find(item => item.active)!;
export class PanelEditorTabs extends PureComponent<PanelEditorTabsProps> {
componentDidMount() {
const { panel } = this.props;
panel.on(CoreEvents.queryChanged, this.triggerForceUpdate);
panel.on(CoreEvents.transformationChanged, this.triggerForceUpdate);
}
const getCounter = useCallback(
(tab: PanelEditorTab) => {
switch (tab.id) {
case PanelEditorTabId.Query:
return panel.targets.length;
case PanelEditorTabId.Alert:
return panel.alert ? 1 : 0;
case PanelEditorTabId.Transform:
const transformations = panel.getTransformations() ?? [];
return transformations.length;
}
componentWillUnmount() {
const { panel } = this.props;
panel.off(CoreEvents.queryChanged, this.triggerForceUpdate);
panel.off(CoreEvents.transformationChanged, this.triggerForceUpdate);
}
return null;
},
[panel]
);
triggerForceUpdate = () => {
this.forceUpdate();
};
getCounter = (tab: PanelEditorTab) => {
const { panel } = this.props;
switch (tab.id) {
case PanelEditorTabId.Query:
return panel.targets.length;
case PanelEditorTabId.Alert:
return panel.alert ? 1 : 0;
case PanelEditorTabId.Transform:
const transformations = panel.getTransformations() ?? [];
return transformations.length;
}
if (tabs.length === 0) {
return null;
}
};
render() {
const { dashboard, onChangeTab, tabs, panel } = this.props;
const styles = getPanelEditorTabsStyles();
const activeTab = tabs.find(item => item.active)!;
return (
<div className={styles.wrapper}>
<TabsBar className={styles.tabBar}>
{tabs.map(tab => {
return (
<Tab
key={tab.id}
label={tab.text}
active={tab.active}
onChangeTab={() => onChangeTab(tab)}
icon={tab.icon as IconName}
counter={getCounter(tab)}
/>
);
})}
</TabsBar>
<TabContent className={styles.tabContent}>
{activeTab.id === PanelEditorTabId.Query && <QueriesTab panel={panel} dashboard={dashboard} />}
{activeTab.id === PanelEditorTabId.Alert && <AlertTab panel={panel} dashboard={dashboard} />}
{activeTab.id === PanelEditorTabId.Transform && <TransformationsEditor panel={panel} />}
</TabContent>
</div>
);
};
if (tabs.length === 0) {
return null;
}
return (
<div className={styles.wrapper}>
<TabsBar className={styles.tabBar}>
{tabs.map(tab => {
return (
<Tab
key={tab.id}
label={tab.text}
active={tab.active}
onChangeTab={() => onChangeTab(tab)}
icon={tab.icon as IconName}
counter={this.getCounter(tab)}
/>
);
})}
</TabsBar>
<TabContent className={styles.tabContent}>
{activeTab.id === PanelEditorTabId.Query && <QueriesTab panel={panel} dashboard={dashboard} />}
{activeTab.id === PanelEditorTabId.Alert && <AlertTab panel={panel} dashboard={dashboard} />}
{activeTab.id === PanelEditorTabId.Transform && <TransformationsEditor panel={panel} />}
</TabContent>
</div>
);
}
}
const getPanelEditorTabsStyles = stylesFactory(() => {
const { theme } = config;
......
public/app/features/dashboard/panel_editor/QueriesTab.tsx
......@@ -161,7 +161,9 @@ export class QueriesTab extends PureComponent<Props, State> {
* Sets the queries for the panel
*/
onUpdateQueries = (queries: DataQuery[]) => {
this.props.panel.targets = queries;
this.props.panel.updateQueries(queries);
// Need to force update to rerender query rows.
this.forceUpdate();
};
......
public/app/features/dashboard/state/PanelModel.ts
......@@ -6,6 +6,7 @@ import { getNextRefIdChar } from 'app/core/utils/query';
import templateSrv from 'app/features/templating/template_srv';
// Types
import {
AppEvent,
DataConfigSource,
DataLink,
DataQuery,
......@@ -23,6 +24,7 @@ import { EDIT_PANEL_ID } from 'app/core/constants';
import config from 'app/core/config';
import { PanelQueryRunner } from './PanelQueryRunner';
import { getDatasourceSrv } from '../../plugins/datasource_srv';
import { CoreEvents } from '../../../types';
export const panelAdded = eventFactory<PanelModel | undefined>('panel-added');
export const panelRemoved = eventFactory<PanelModel | undefined>('panel-removed');
......@@ -382,6 +384,11 @@ export class PanelModel implements DataConfigSource {
}
}
updateQueries(queries: DataQuery[]) {
this.events.emit(CoreEvents.queryChanged);
this.targets = queries;
}
addQuery(query?: Partial<DataQuery>) {
query = query || { refId: 'A' };
query.refId = getNextRefIdChar(this.targets);
......@@ -461,6 +468,7 @@ export class PanelModel implements DataConfigSource {
}
setTransformations(transformations: DataTransformerConfig[]) {
this.events.emit(CoreEvents.transformationChanged);
this.transformations = transformations;
this.resendLastResult();
}
......@@ -488,6 +496,14 @@ export class PanelModel implements DataConfigSource {
getSavedId(): number {
return this.editSourceId ?? this.id;
}
on<T>(event: AppEvent<T>, callback: (payload?: T) => void) {
this.events.on(event, callback);
}
off<T>(event: AppEvent<T>, callback: (payload?: T) => void) {
this.events.off(event, callback);
}
}
function applyFieldConfigDefaults(fieldConfig: FieldConfigSource, defaults: FieldConfigSource): FieldConfigSource {
......
public/app/types/events.ts
......@@ -156,3 +156,6 @@ export const jsonDiffReady = eventFactory('json-diff-ready');
export const closeTimepicker = eventFactory('closeTimepicker');
export const routeUpdated = eventFactory('$routeUpdate');
export const queryChanged = eventFactory('queryChanged');
export const transformationChanged = eventFactory('transformationChanged');
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment