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

toggle tabs is updated

Browse Source
This commit is contained in:
Palash gupta 2021-12-27 23:55:38 +05:30
parent f9c214bd53
commit 40c287028b
No known key found for this signature in database
GPG Key ID: 8FD05AE6F9150AD6
11 changed files with 123 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/src/components/RouteTab/index.tsx Normal file
View File

@ -0,0 +1,51 @@
import React from 'react';
import { Tabs, TabsProps } from 'antd';
const { TabPane } = Tabs;
import history from 'lib/history';
const RouteTab = ({
routes,
activeKey,
onChangeHandler,
...rest
}: RouteTabProps & TabsProps): JSX.Element => {
const onChange = (activeRoute: string) => {
onChangeHandler && onChangeHandler();
const selectedRoute = routes.find((e) => e.name === activeRoute);
if (selectedRoute) {
history.push(selectedRoute.route);
}
};
return (
<Tabs
onChange={onChange}
destroyInactiveTabPane
activeKey={activeKey}
{...rest}
>
{routes.map(
({ Component, name }): JSX.Element => (
<TabPane tab={name} key={name}>
<Component />
</TabPane>
),
)}
</Tabs>
);
};
interface RouteTabProps {
routes: {
name: string;
route: string;
Component: () => JSX.Element;
}[];
activeKey: TabsProps['activeKey'];
onChangeHandler?: VoidFunction;
}
export default RouteTab;

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

@ -9,17 +9,10 @@ import FormAlertChannels from 'container/FormAlertChannels';
import history from 'lib/history';
import { Store } from 'rc-field-form/lib/interface';
import React, { useCallback, useState } from 'react';
import { connect } from 'react-redux';
import { useParams } from 'react-router';
import { bindActionCreators } from 'redux';
import { ThunkDispatch } from 'redux-thunk';
import { ToggleSettingsTab } from 'store/actions';
import AppActions from 'types/actions';
import { SettingTab } from 'types/reducer/app';
const EditAlertChannels = ({
initialValue,
toggleSettingsTab,
}: EditAlertChannelsProps): JSX.Element => {
const [formInstance] = Form.useForm();
const [selectedConfig, setSelectedConfig] = useState<Partial<SlackChannel>>({
@ -52,7 +45,6 @@ const EditAlertChannels = ({
message: 'Success',
description: 'Channels Edited Successfully',
});
toggleSettingsTab('Alert Channels');
setTimeout(() => {
history.replace(ROUTES.SETTINGS);
@ -100,18 +92,8 @@ const EditAlertChannels = ({
);
};
interface DispatchProps {
toggleSettingsTab: (props: SettingTab) => void;
}
const mapDispatchToProps = (
dispatch: ThunkDispatch<unknown, unknown, AppActions>,
): DispatchProps => ({
toggleSettingsTab: bindActionCreators(ToggleSettingsTab, dispatch),
});
interface EditAlertChannelsProps extends DispatchProps {
interface EditAlertChannelsProps {
initialValue: Store;
}
export default connect(null, mapDispatchToProps)(EditAlertChannels);
export default EditAlertChannels;

70
frontend/src/container/SettingsWrapper/index.tsx
View File

@ -1,70 +0,0 @@
import { Tabs } from 'antd';
import ROUTES from 'constants/routes';
import history from 'lib/history';
import React, { useCallback } from 'react';
import { connect, useSelector } from 'react-redux';
import { bindActionCreators } from 'redux';
import { ThunkDispatch } from 'redux-thunk';
import { ToggleSettingsTab } from 'store/actions';
import { AppState } from 'store/reducers';
import AppActions from 'types/actions';
import AppReducer, { SettingTab } from 'types/reducer/app';
const { TabPane } = Tabs;
const SettingsWrapper = ({
AlertChannels,
General,
toggleSettingsTab,
defaultRoute,
}: SettingsWrapperProps): JSX.Element => {
const { settingsActiveTab } = useSelector<AppState, AppReducer>(
(state) => state.app,
);
const onChangeHandler = useCallback(
(value: SettingTab) => {
toggleSettingsTab(value);
if (value === 'General') {
history.push(ROUTES.SETTINGS);
}
if (value === 'Alert Channels') {
history.push(ROUTES.ALL_CHANNELS);
}
},
[toggleSettingsTab],
);
return (
<Tabs
destroyInactiveTabPane
onChange={(value): void => onChangeHandler(value as SettingTab)}
activeKey={defaultRoute || settingsActiveTab}
>
<TabPane tab="General" key="General">
<General />
</TabPane>
<TabPane tab="Alert Channels" key="Alert Channels">
<AlertChannels />
</TabPane>
</Tabs>
);
};
interface DispatchProps {
toggleSettingsTab: (props: SettingTab) => void;
}
const mapDispatchToProps = (
dispatch: ThunkDispatch<unknown, unknown, AppActions>,
): DispatchProps => ({
toggleSettingsTab: bindActionCreators(ToggleSettingsTab, dispatch),
});
interface SettingsWrapperProps extends DispatchProps {
General: () => JSX.Element;
AlertChannels: () => JSX.Element;
defaultRoute?: SettingTab;
}
export default connect(null, mapDispatchToProps)(SettingsWrapper);

28
frontend/src/pages/AlertChannelCreate/index.tsx
View File

@ -1,18 +1,32 @@
import RouteTab from 'components/RouteTab';
import ROUTES from 'constants/routes';
import CreateAlertChannels from 'container/CreateAlertChannels';
import GeneralSettings from 'container/GeneralSettings';
import SettingsWrapper from 'container/SettingsWrapper';
import history from 'lib/history';
import React from 'react';
const SettingsPage = (): JSX.Element => {
const AlertChannels = (): JSX.Element => {
return <CreateAlertChannels />;
};
const pathName = history.location.pathname;
return (
<SettingsWrapper
<RouteTab
{...{
AlertChannels,
General: GeneralSettings,
routes: [
{
Component: GeneralSettings,
name: 'General Settings',
route: ROUTES.SETTINGS,
},
{
Component: () => {
return <CreateAlertChannels />;
},
name: 'Alert Channels',
route: ROUTES.ALL_CHANNELS,
},
],
activeKey:
pathName === ROUTES.SETTINGS ? 'General Settings' : 'Alert Channels',
}}
/>
);

37
frontend/src/pages/AllAlertChannels/index.tsx
View File

@ -1,16 +1,33 @@
import AlertChannels from 'container/AllAlertChannels';
import GeneralSettings from 'container/GeneralSettings';
import SettingsWrapper from 'container/SettingsWrapper';
import React from 'react';
import RouteTab from 'components/RouteTab';
import ROUTES from 'constants/routes';
import history from 'lib/history';
const AllAlertChannels = (): JSX.Element => (
<SettingsWrapper
{...{
AlertChannels,
General: GeneralSettings,
defaultRoute: 'Alert Channels',
}}
/>
);
const AllAlertChannels = (): JSX.Element => {
const pathName = history.location.pathname;
return (
<RouteTab
{...{
routes: [
{
Component: GeneralSettings,
name: 'General Settings',
route: ROUTES.SETTINGS,
},
{
Component: AlertChannels,
name: 'Alert Channels',
route: ROUTES.ALL_CHANNELS,
},
],
activeKey:
pathName === ROUTES.SETTINGS ? 'General Settings' : 'Alert Channels',
}}
/>
);
};
export default AllAlertChannels;

24
frontend/src/pages/Settings/index.tsx
View File

@ -1,14 +1,30 @@
import AlertChannels from 'container/AllAlertChannels';
import GeneralSettings from 'container/GeneralSettings';
import SettingsWrapper from 'container/SettingsWrapper';
import React from 'react';
import RouteTab from 'components/RouteTab';
import ROUTES from 'constants/routes';
import history from 'lib/history';
const SettingsPage = (): JSX.Element => {
const pathName = history.location.pathname;
return (
<SettingsWrapper
<RouteTab
{...{
AlertChannels,
General: GeneralSettings,
routes: [
{
Component: GeneralSettings,
name: 'General Settings',
route: ROUTES.SETTINGS,
},
{
Component: AlertChannels,
name: 'Alert Channels',
route: ROUTES.ALL_CHANNELS,
},
],
activeKey:
pathName === ROUTES.ALL_CHANNELS ? 'Alert Channels' : 'General Settings',
}}
/>
);

1
frontend/src/store/actions/app/index.ts
View File

@ -1,3 +1,2 @@
export * from './toggleDarkMode';
export * from './toggleSettingsTab';
export * from './userLoggedIn';

16
frontend/src/store/actions/app/toggleSettingsTab.ts
View File

@ -1,16 +0,0 @@
import { Dispatch } from 'redux';
import AppActions from 'types/actions';
import { SettingTab } from 'types/reducer/app';
export const ToggleSettingsTab = (
props: SettingTab,
): ((dispatch: Dispatch<AppActions>) => void) => {
return (dispatch: Dispatch<AppActions>): void => {
dispatch({
type: 'TOGGLE_SETTINGS_TABS',
payload: {
activeTab: props,
},
});
};
};

15
frontend/src/store/reducers/app.ts
View File

@ -1,10 +1,5 @@
import { IS_LOGGED_IN } from 'constants/auth';
import {
AppAction,
LOGGED_IN,
SWITCH_DARK_MODE,
TOGGLE_SETTINGS_TABS,
} from 'types/actions/app';
import { AppAction, LOGGED_IN, SWITCH_DARK_MODE } from 'types/actions/app';
import getTheme from 'lib/theme/getTheme';
import InitialValueTypes from 'types/reducer/app';
import getLocalStorageKey from 'api/browser/localstorage/get';
@ -12,7 +7,6 @@ import getLocalStorageKey from 'api/browser/localstorage/get';
const InitialValue: InitialValueTypes = {
isDarkMode: getTheme() === 'darkMode' ? true : false,
isLoggedIn: getLocalStorageKey(IS_LOGGED_IN) === 'yes',
settingsActiveTab: 'General',
};
const appReducer = (
@ -34,13 +28,6 @@ const appReducer = (
};
}
case TOGGLE_SETTINGS_TABS: {
return {
...state,
settingsActiveTab: action.payload.activeTab,
};
}
default:
return state;
}

12
frontend/src/types/actions/app.ts
View File

@ -1,8 +1,5 @@
import { SettingTab } from 'types/reducer/app';
export const SWITCH_DARK_MODE = 'SWITCH_DARK_MODE';
export const LOGGED_IN = 'LOGGED_IN';
export const TOGGLE_SETTINGS_TABS = 'TOGGLE_SETTINGS_TABS';
export interface SwitchDarkMode {
type: typeof SWITCH_DARK_MODE;
@ -12,11 +9,4 @@ export interface LoggedInUser {
type: typeof LOGGED_IN;
}
export interface ToggleSettingsTab {
type: typeof TOGGLE_SETTINGS_TABS;
payload: {
activeTab: SettingTab;
};
}
export type AppAction = SwitchDarkMode | LoggedInUser | ToggleSettingsTab;
export type AppAction = SwitchDarkMode | LoggedInUser;

2
frontend/src/types/reducer/app.ts
View File

@ -1,6 +1,4 @@
export type SettingTab = 'General' | 'Alert Channels';
export default interface AppReducer {
isDarkMode: boolean;
isLoggedIn: boolean;
settingsActiveTab: SettingTab;
}