IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Hugo Häggmark 2020-04-17 14:46:32 +02:00 committed by GitHub
parent 89c8855f9d
commit ed8c3430c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/src/components/Tabs/Tab.tsx
View File

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

19
public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
View File

@ -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<PanelEditorTabsProps> = ({ 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<PanelEditorTabsProps> = ({ panel, dashboa
active={tab.active}
onChangeTab={() => onChangeTab(tab)}
icon={tab.icon as IconName}
counter={getCounter(tab)}
/>
);
})}