GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 02:45:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add tooltip for disabled tab (#3071)

Browse Source
This commit is contained in:
Yevhen Shevchenko 2023-07-07 15:35:42 +03:00 committed by GitHub
parent 532ebdc856
commit 84c81b054c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 59 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/components/TabLabel/TabLabel.interfaces.ts Normal file
View File

@ -0,0 +1,5 @@
export type TabLabelProps = {
isDisabled: boolean;
label: string;
tooltipText?: string;
};

29
frontend/src/components/TabLabel/index.tsx Normal file
View File

@ -0,0 +1,29 @@
import { Tooltip } from 'antd';
import { memo } from 'react';
import { TabLabelProps } from './TabLabel.interfaces';
function TabLabel({
label,
isDisabled,
tooltipText,
}: TabLabelProps): JSX.Element {
const currentLabel = <span>{label}</span>;
if (isDisabled) {
return (
<Tooltip
trigger="hover"
autoAdjustOverflow
placement="top"
title={tooltipText}
>
{currentLabel}
</Tooltip>
);
}
return currentLabel;
}
export default memo(TabLabel);

11
frontend/src/container/LogsExplorerViews/index.tsx
View File

@ -1,4 +1,5 @@
import { TabsProps } from 'antd';
import TabLabel from 'components/TabLabel';
import { PANEL_TYPES } from 'constants/queryBuilder';
import { queryParamNamesMap } from 'constants/queryBuilderQueryNames';
import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config';
@ -252,7 +253,13 @@ function LogsExplorerViews(): JSX.Element {
const tabsItems: TabsProps['items'] = useMemo(
() => [
{
label: 'List View',
label: (
<TabLabel
label="List View"
tooltipText="Please remove attributes from Group By filter to switch to List View tab"
isDisabled={isMultipleQueries || isGroupByExist}
/>
),
key: PANEL_TYPES.LIST,
disabled: isMultipleQueries || isGroupByExist,
children: (
@ -267,7 +274,7 @@ function LogsExplorerViews(): JSX.Element {
),
},
{
label: 'TimeSeries',
label: <TabLabel label="Time Series" isDisabled={false} />,
key: PANEL_TYPES.TIME_SERIES,
children: (
<TimeSeriesView isLoading={isFetching} data={data} isError={isError} />

19
frontend/src/pages/TracesExplorer/utils.tsx
View File

@ -1,4 +1,5 @@
import { TabsProps } from 'antd';
import TabLabel from 'components/TabLabel';
import { PANEL_TYPES } from 'constants/queryBuilder';
import TimeSeriesView from 'container/TimeSeriesView';
import ListView from 'container/TracesExplorer/ListView';
@ -13,19 +14,31 @@ export const getTabsItems = ({
isListViewDisabled,
}: GetTabsItemsProps): TabsProps['items'] => [
{
label: 'List View',
label: (
<TabLabel
label="List View"
isDisabled={isListViewDisabled}
tooltipText="Please remove attributes from Group By filter to switch to List View tab"
/>
),
key: PANEL_TYPES.LIST,
children: <ListView />,
disabled: isListViewDisabled,
},
{
label: 'Traces',
label: (
<TabLabel
label="Traces"
isDisabled={isListViewDisabled}
tooltipText="Please remove attributes from Group By filter to switch to Traces tab"
/>
),
key: PANEL_TYPES.TRACE,
children: <TracesView />,
disabled: isListViewDisabled,
},
{
label: 'Time Series',
label: <TabLabel label="Time Series" isDisabled={false} />,
key: PANEL_TYPES.TIME_SERIES,
children: <TimeSeriesView dataSource={DataSource.TRACES} />,
},