PanelEditorTabs: adds counter to Query, Alert and Transform (#23645)

packages/grafana-ui/src/components/Tabs/Tab.tsx

@@ -67,7 +67,7 @@ export const Tab: FC<TabProps> = ({ label, active, icon, onChangeTab, counter })
     <li className={cx(tabsStyles.tabItem, active && tabsStyles.activeStyle)} onClick={onChangeTab}>
     <li className={cx(tabsStyles.tabItem, active && tabsStyles.activeStyle)} onClick={onChangeTab}>
       {icon && <Icon name={icon} />}
       {icon && <Icon name={icon} />}
       {label}
       {label}
-      {!!counter && <Counter value={counter} />}
+      {typeof counter === 'number' && <Counter value={counter} />}
     </li>
     </li>
   );
   );
 };
 };

public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx

-import React from 'react';
+import React, { useCallback } from 'react';
 import { config } from 'app/core/config';
 import { config } from 'app/core/config';
 import { css } from 'emotion';
 import { css } from 'emotion';
 import { IconName, stylesFactory, Tab, TabContent, TabsBar } from '@grafana/ui';
 import { IconName, stylesFactory, Tab, TabContent, TabsBar } from '@grafana/ui';
@@ -22,6 +22,22 @@ interface PanelEditorTabsProps {
 export const PanelEditorTabs: React.FC<PanelEditorTabsProps> = ({ panel, dashboard, tabs, data, onChangeTab }) => {
 export const PanelEditorTabs: React.FC<PanelEditorTabsProps> = ({ panel, dashboard, tabs, data, onChangeTab }) => {
   const styles = getPanelEditorTabsStyles();
   const styles = getPanelEditorTabsStyles();
   const activeTab = tabs.find(item => item.active);
   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) {
   if (tabs.length === 0) {
     return null;
     return null;
@@ -42,6 +58,7 @@ export const PanelEditorTabs: React.FC<PanelEditorTabsProps> = ({ panel, dashboa
               active={tab.active}
               active={tab.active}
               onChangeTab={() => onChangeTab(tab)}
               onChangeTab={() => onChangeTab(tab)}
               icon={tab.icon as IconName}
               icon={tab.icon as IconName}
+              counter={getCounter(tab)}
             />
             />
           );
           );
         })}
         })}