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

fix: tabs deprecation warning from antd (#2479)

Browse Source 
Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: Chintan Sudani <46838508+techchintan@users.noreply.github.com>
Co-authored-by: Palash Gupta <palashgdev@gmail.com>
This commit is contained in:
GitStart 2023-03-22 12:01:37 +05:30 committed by GitHub
parent 97bfee48e1
commit da4cbf6c2f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 184 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/components/RouteTab/index.tsx
View File

@ -2,8 +2,6 @@ import { Tabs, TabsProps } from 'antd';
import history from 'lib/history';
import React from 'react';
const { TabPane } = Tabs;
function RouteTab({
routes,
activeKey,
@ -22,29 +20,23 @@ function RouteTab({
}
};
const items = routes.map(({ Component, name, route }) => ({
label: name,
key: name,
tabKey: route,
children: <Component />,
}));
return (
<Tabs
onChange={onChange}
destroyInactiveTabPane
activeKey={activeKey}
animated
items={items}
// eslint-disable-next-line react/jsx-props-no-spreading
{...rest}
>
{routes.map(
({ Component, name, route }): JSX.Element => (
<TabPane
tabKey={route}
animated
destroyInactiveTabPane
tab={name}
key={name}
>
<Component />
</TabPane>
),
)}
</Tabs>
/>
);
}

36
frontend/src/container/FormAlertRules/QuerySection.tsx
View File

@ -23,7 +23,6 @@ import PromqlSection from './PromqlSection';
import { FormContainer, QueryButton, StepHeading } from './styles';
import { toIMetricsBuilderQuery } from './utils';
const { TabPane } = Tabs;
function QuerySection({
queryCategory,
setQueryCategory,
@ -282,6 +281,24 @@ function QuerySection({
runQuery();
};
const tabs = [
{
label: t('tab_qb'),
key: EQueryType.QUERY_BUILDER.toString(),
disabled: true,
},
{
label: t('tab_chquery'),
key: EQueryType.CLICKHOUSE.toString(),
},
];
const items = [
{ label: t('tab_qb'), key: EQueryType.QUERY_BUILDER.toString() },
{ label: t('tab_chquery'), key: EQueryType.CLICKHOUSE.toString() },
{ label: t('tab_promql'), key: EQueryType.PROM.toString() },
];
const renderTabs = (typ: AlertTypes): JSX.Element | null => {
switch (typ) {
case AlertTypes.TRACES_BASED_ALERT:
@ -303,14 +320,8 @@ function QuerySection({
)}
</span>
}
>
<TabPane
tab={t('tab_qb')}
key={EQueryType.QUERY_BUILDER.toString()}
disabled
/>
<TabPane tab={t('tab_chquery')} key={EQueryType.CLICKHOUSE.toString()} />
</Tabs>
items={tabs}
/>
);
case AlertTypes.METRICS_BASED_ALERT:
default:
@ -330,11 +341,8 @@ function QuerySection({
)}
</span>
}
>
<TabPane tab={t('tab_qb')} key={EQueryType.QUERY_BUILDER.toString()} />
<TabPane tab={t('tab_chquery')} key={EQueryType.CLICKHOUSE.toString()} />
<TabPane tab={t('tab_promql')} key={EQueryType.PROM.toString()} />
</Tabs>
items={items}
/>
);
}
};

26
frontend/src/container/Licenses/index.tsx
View File

@ -8,8 +8,6 @@ import { useQuery } from 'react-query';
import ApplyLicenseForm from './ApplyLicenseForm';
import ListLicenses from './ListLicenses';
const { TabPane } = Tabs;
function Licenses(): JSX.Element {
const { t } = useTranslation(['licenses']);
const { data, isError, isLoading, refetch } = useQuery({
@ -28,17 +26,21 @@ function Licenses(): JSX.Element {
const allValidLicense =
data?.payload?.filter((license) => license.isCurrent) || [];
return (
<Tabs destroyInactiveTabPane defaultActiveKey="licenses">
<TabPane tabKey="licenses" tab={t('tab_current_license')} key="licenses">
<ApplyLicenseForm licenseRefetch={refetch} />
<ListLicenses licenses={allValidLicense} />
</TabPane>
const tabs = [
{
label: t('tab_current_license'),
key: 'licenses',
children: <ApplyLicenseForm licenseRefetch={refetch} />,
},
{
label: t('tab_license_history'),
key: 'history',
children: <ListLicenses licenses={allValidLicense} />,
},
];
<TabPane tabKey="history" tab={t('tab_license_history')} key="history">
<ListLicenses licenses={allValidLicense} />
</TabPane>
</Tabs>
return (
<Tabs destroyInactiveTabPane defaultActiveKey="licenses" items={tabs} />
);
}

22
frontend/src/container/LogDetailedView/index.tsx
View File

@ -24,6 +24,19 @@ function LogDetailedView(): JSX.Element {
});
};
const items = [
{
label: 'Table',
key: '1',
children: detailedLog && <TableView logData={detailedLog} />,
},
{
label: 'JSON',
key: '2',
children: detailedLog && <JSONView logData={detailedLog} />,
},
];
return (
<Drawer
width="60%"
@ -35,14 +48,7 @@ function LogDetailedView(): JSX.Element {
style={{ overscrollBehavior: 'contain' }}
destroyOnClose
>
<Tabs defaultActiveKey="1">
<Tabs.TabPane tab="Table" key="1">
{detailedLog && <TableView logData={detailedLog} />}
</Tabs.TabPane>
<Tabs.TabPane tab="JSON" key="2">
{detailedLog && <JSONView logData={detailedLog} />}
</Tabs.TabPane>
</Tabs>
<Tabs defaultActiveKey="1" items={items} />
</Drawer>
);
}

5
frontend/src/container/LogsSearchFilter/SearchFields/QueryBuilder/QueryBuilder.tsx
View File

@ -27,8 +27,9 @@ function QueryConditionField({
return (
<Select
defaultValue={
(query as any).value &&
(((query as any)?.value as any) as string).toUpperCase()
(query as QueryFields).value &&
(((((query as QueryFields)
?.value as unknown) as QueryFields) as unknown) as string).toUpperCase()
}
onChange={(e): void => {
onUpdate({ ...query, value: e }, queryIndex);

18
frontend/src/container/NewDashboard/DashboardSettings/index.tsx
View File

@ -4,19 +4,13 @@ import React from 'react';
import GeneralDashboardSettings from './General';
import VariablesSetting from './Variables';
const { TabPane } = Tabs;
function DashboardSettingsContent(): JSX.Element {
return (
<Tabs>
<TabPane tab="General" key="general">
<GeneralDashboardSettings />
</TabPane>
<TabPane tab="Variables" key="variables">
<VariablesSetting />
</TabPane>
</Tabs>
);
const items = [
{ label: 'General', key: 'general', children: <GeneralDashboardSettings /> },
{ label: 'Variables', key: 'variables', children: <VariablesSetting /> },
];
return <Tabs items={items} />;
}
export default DashboardSettingsContent;

145
frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
View File

@ -34,7 +34,6 @@ import TabHeader from './TabHeader';
import { getQueryKey } from './utils/getQueryKey';
import { showUnstagedStashConfirmBox } from './utils/userSettings';
const { TabPane } = Tabs;
function QuerySection({
handleUnstagedChanges,
updateQuery,
@ -144,6 +143,77 @@ function QuerySection({
setLocalQueryChanges(cloneDeep(updatedQuery));
};
const items = [
{
key: EQueryType.QUERY_BUILDER.toString(),
tab: (
<TabHeader
tabName="Query Builder"
hasUnstagedChanges={queryDiff(
query,
localQueryChanges,
EQueryType.QUERY_BUILDER,
)}
/>
),
children: (
<QueryBuilderQueryContainer
key={rctTabKey.QUERY_BUILDER}
queryData={localQueryChanges}
updateQueryData={({ updatedQuery }: IHandleUpdatedQuery): void => {
handleLocalQueryUpdate({ updatedQuery });
}}
metricsBuilderQueries={
localQueryChanges[WIDGET_QUERY_BUILDER_QUERY_KEY_NAME]
}
selectedGraph={selectedGraph}
/>
),
},
{
key: EQueryType.CLICKHOUSE.toString(),
tab: (
<TabHeader
tabName="ClickHouse Query"
hasUnstagedChanges={queryDiff(
query,
localQueryChanges,
EQueryType.CLICKHOUSE,
)}
/>
),
children: (
<ClickHouseQueryContainer
key={rctTabKey.CLICKHOUSE}
queryData={localQueryChanges}
updateQueryData={({ updatedQuery }: IHandleUpdatedQuery): void => {
handleLocalQueryUpdate({ updatedQuery });
}}
clickHouseQueries={localQueryChanges[WIDGET_CLICKHOUSE_QUERY_KEY_NAME]}
/>
),
},
{
key: EQueryType.PROM.toString(),
tab: (
<TabHeader
tabName="PromQL"
hasUnstagedChanges={queryDiff(query, localQueryChanges, EQueryType.PROM)}
/>
),
children: (
<PromQLQueryContainer
key={rctTabKey.PROM}
queryData={localQueryChanges}
updateQueryData={({ updatedQuery }: IHandleUpdatedQuery): void => {
handleLocalQueryUpdate({ updatedQuery });
}}
promQLQueries={localQueryChanges[WIDGET_PROMQL_QUERY_KEY_NAME]}
/>
),
},
];
return (
<>
<div style={{ display: 'flex' }}>
@ -165,77 +235,8 @@ function QuerySection({
</Button>
</span>
}
>
<TabPane
tab={
<TabHeader
tabName="Query Builder"
hasUnstagedChanges={queryDiff(
query,
localQueryChanges,
EQueryType.QUERY_BUILDER,
)}
/>
}
key={EQueryType.QUERY_BUILDER.toString()}
>
<QueryBuilderQueryContainer
key={rctTabKey.QUERY_BUILDER}
queryData={localQueryChanges}
updateQueryData={({ updatedQuery }: IHandleUpdatedQuery): void => {
handleLocalQueryUpdate({ updatedQuery });
}}
metricsBuilderQueries={
localQueryChanges[WIDGET_QUERY_BUILDER_QUERY_KEY_NAME]
}
selectedGraph={selectedGraph}
/>
</TabPane>
<TabPane
tab={
<TabHeader
tabName="ClickHouse Query"
hasUnstagedChanges={queryDiff(
query,
localQueryChanges,
EQueryType.CLICKHOUSE,
)}
/>
}
key={EQueryType.CLICKHOUSE.toString()}
>
<ClickHouseQueryContainer
key={rctTabKey.CLICKHOUSE}
queryData={localQueryChanges}
updateQueryData={({ updatedQuery }: IHandleUpdatedQuery): void => {
handleLocalQueryUpdate({ updatedQuery });
}}
clickHouseQueries={localQueryChanges[WIDGET_CLICKHOUSE_QUERY_KEY_NAME]}
/>
</TabPane>
<TabPane
tab={
<TabHeader
tabName="PromQL"
hasUnstagedChanges={queryDiff(
query,
localQueryChanges,
EQueryType.PROM,
)}
/>
}
key={EQueryType.PROM.toString()}
>
<PromQLQueryContainer
key={rctTabKey.PROM}
queryData={localQueryChanges}
updateQueryData={({ updatedQuery }: IHandleUpdatedQuery): void => {
handleLocalQueryUpdate({ updatedQuery });
}}
promQLQueries={localQueryChanges[WIDGET_PROMQL_QUERY_KEY_NAME]}
/>
</TabPane>
</Tabs>
items={items}
/>
</div>
{/* {localQueryChanges.map((e, index) => (
// <Query

48
frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
View File

@ -15,8 +15,6 @@ import {
} from './styles';
import Tags from './Tags';
const { TabPane } = Tabs;
function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
const { tree, firstSpanStartTime } = props;
@ -44,6 +42,33 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
const { tags, nonChildReferences } = tree;
const items = [
{
label: 'Tags',
key: '1',
children: (
<Tags
onToggleHandler={onToggleHandler}
setText={setText}
tags={tags}
linkedSpans={nonChildReferences}
/>
),
},
{
label: 'Events',
key: '2',
children: (
<Events
events={tree.event}
onToggleHandler={onToggleHandler}
setText={setText}
firstSpanStartTime={firstSpanStartTime}
/>
),
},
];
return (
<CardContainer>
<StyledSpace
@ -81,24 +106,7 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
)}
</Modal>
<Tabs defaultActiveKey="1">
<TabPane tab="Tags" key="1">
<Tags
onToggleHandler={onToggleHandler}
setText={setText}
tags={tags}
linkedSpans={nonChildReferences}
/>
</TabPane>
<TabPane tab="Events" key="2">
<Events
events={tree.event}
onToggleHandler={onToggleHandler}
setText={setText}
firstSpanStartTime={firstSpanStartTime}
/>
</TabPane>
</Tabs>
<Tabs defaultActiveKey="1" items={items} />
</CardContainer>
);
}

38
frontend/src/pages/AlertList/index.tsx
View File

@ -4,31 +4,23 @@ import AllAlertRules from 'container/ListAlertRules';
import TriggeredAlerts from 'container/TriggeredAlerts';
import React from 'react';
const { TabPane } = Tabs;
function AllAlertList(): JSX.Element {
const items = [
{ label: 'Alert Rules', key: 'Alert Rules', children: <AllAlertRules /> },
{
label: 'Triggered Alerts',
key: 'Triggered Alerts',
children: <TriggeredAlerts />,
},
// {
// label: 'Map Alert Channels',
// key = 'Map Alert Channels',
// children: <MapAlertChannels />,
// },
];
return (
<Tabs destroyInactiveTabPane defaultActiveKey="Alert Rules">
<TabPane tabKey="Alert Rules" tab="Alert Rules" key="Alert Rules">
<AllAlertRules />
</TabPane>
<TabPane
tabKey="Triggered Alerts"
key="Triggered Alerts"
tab="Triggered Alerts"
>
<TriggeredAlerts />
</TabPane>
{/* <TabPane
tabKey="Map Alert Channels"
key="Map Alert Channels"
tab="Map Alert Channels"
>
<MapAlertChannels />
</TabPane> */}
</Tabs>
<Tabs destroyInactiveTabPane defaultActiveKey="Alert Rules" items={items} />
);
}