diff --git a/packages/grafana-ui/src/components/Tabs/Tab.tsx b/packages/grafana-ui/src/components/Tabs/Tab.tsx index cea1676c112..a1bcdd20501 100644 --- a/packages/grafana-ui/src/components/Tabs/Tab.tsx +++ b/packages/grafana-ui/src/components/Tabs/Tab.tsx @@ -67,7 +67,7 @@ export const Tab: FC = ({ label, active, icon, onChangeTab, counter })
  • {icon && } {label} - {!!counter && } + {typeof counter === 'number' && }
  • ); }; diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx index 87ac1d3f613..ea1c988d789 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useCallback } from 'react'; import { config } from 'app/core/config'; import { css } from 'emotion'; import { IconName, stylesFactory, Tab, TabContent, TabsBar } from '@grafana/ui'; @@ -22,6 +22,22 @@ interface PanelEditorTabsProps { export const PanelEditorTabs: React.FC = ({ panel, dashboard, tabs, data, onChangeTab }) => { const styles = getPanelEditorTabsStyles(); const activeTab = tabs.find(item => item.active); + 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; + } + + return null; + }, + [panel] + ); if (tabs.length === 0) { return null; @@ -42,6 +58,7 @@ export const PanelEditorTabs: React.FC = ({ panel, dashboa active={tab.active} onChangeTab={() => onChangeTab(tab)} icon={tab.icon as IconName} + counter={getCounter(tab)} /> ); })}