GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-13 04:58:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix(FE): Pages are refactored (#321)

Browse Source 
* feat: signup api is added

* fix: instrument and signup page is refactored

* fix: Settings page is updated
This commit is contained in:
pal-sig 2021-10-11 16:05:59 +05:30 committed by GitHub
parent 917ef533a3
commit d10b9790dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 252 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/AppRoutes/pageComponents.ts
View File

@ -43,20 +43,17 @@ export const ServicesTablePage = Loadable(
);
export const SignupPage = Loadable(
() => import(/* webpackChunkName: "SignupPage" */ 'modules/Auth/Signup'),
() => import(/* webpackChunkName: "SignupPage" */ 'pages/SignUp'),
);
export const SettingsPage = Loadable(
() =>
import(
/* webpackChunkName: "SettingsPage" */ 'modules/Settings/settingsPage'
),
() => import(/* webpackChunkName: "SettingsPage" */ 'pages/Settings'),
);
export const InstrumentationPage = Loadable(
() =>
import(
/* webpackChunkName: "InstrumentationPage" */ 'modules/add-instrumentation/instrumentationPage'
/* webpackChunkName: "InstrumentationPage" */ 'pages/AddInstrumentation'
),
);

26
frontend/src/api/user/signup.ts Normal file
View File

@ -0,0 +1,26 @@
import axios from 'api';
import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
import { AxiosError } from 'axios';
import { ErrorResponse, SuccessResponse } from 'types/api';
import { Props } from 'types/api/user/signup';
const signup = async (
props: Props,
): Promise<SuccessResponse<undefined> | ErrorResponse> => {
try {
const response = await axios.post('/user?email=', {
...props,
});
return {
statusCode: 200,
error: null,
message: response.data.status,
payload: response.data.data,
};
} catch (error) {
return ErrorResponseHandler(error as AxiosError);
}
};
export default signup;

158
frontend/src/modules/Auth/Signup.tsx
View File

@ -1,158 +0,0 @@
import { Button, Input, Row, Space } from 'antd';
import api from 'api';
import { IS_LOGGED_IN } from 'constants/auth';
import ROUTES from 'constants/routes';
import React, { useState } from 'react';
import { withRouter } from 'react-router';
import { RouteComponentProps } from 'react-router-dom';
type SignUpProps = RouteComponentProps<any>;
const Signup = (props: SignUpProps): JSX.Element => {
const [state, setState] = useState({ submitted: false });
const [formState, setFormState] = useState({
firstName: { value: '' },
companyName: { value: '' },
email: { value: '' },
password: { value: '', valid: true },
emailOptIn: { value: true },
});
const updateForm = (name: any, target: any, valueAttr = 'value') => {
/* Validate password (if applicable) */
if (name === 'firstName') {
setFormState({
...formState,
firstName: { ...formState.firstName, value: target[valueAttr] },
});
} else if (name === 'email') {
setFormState({
...formState,
email: { ...formState.email, value: target[valueAttr] },
});
}
};
const handleSubmit = (e: any) => {
e.preventDefault();
setState({ ...state, submitted: true });
const payload = {
first_name: formState.firstName,
email: formState.email,
};
const texttolog = JSON.stringify(payload);
api.post('/user?email=' + texttolog).then((res) => {
// console.log(res);
// console.log(res.data);
});
localStorage.setItem(IS_LOGGED_IN, 'yes');
props.history.push(ROUTES.APPLICATION);
};
return (
<div className="signup-form">
<Space
direction="vertical"
className="space-top"
style={{ width: '100%', paddingLeft: 32 }}
>
<h1
className="title"
style={{
marginBottom: 0,
marginTop: 40,
display: 'flex',
alignItems: 'center',
}}
>
{/* <img src={"Signoz-white.svg"} alt="" style={{ height: 60 }} /> */}
Create your account
</h1>
<div className="page-caption">
Monitor your applications. Find what is causing issues.
</div>
</Space>
<Row style={{ display: 'flex', justifyContent: 'center' }}>
<div
style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}
>
<img
src={'signoz.svg'}
style={{ maxHeight: '100%', maxWidth: 300, marginTop: 64 }}
alt=""
className="main-img"
/>
</div>
<div
style={{
display: 'flex',
justifyContent: 'flex-start',
margin: '0 32px',
flexDirection: 'column',
paddingTop: 32,
maxWidth: '32rem',
}}
>
<form onSubmit={handleSubmit}>
<div className="input-set">
<label htmlFor="signupEmail">Email</label>
<Input
placeholder="mike@netflix.com"
type="email"
value={formState.email.value}
onChange={(e) => updateForm('email', e.target)}
required
// disabled={accountLoading}
id="signupEmail"
/>
</div>
<div className="input-set">
<label htmlFor="signupFirstName">First Name</label>
<Input
placeholder="Mike"
autoFocus
value={formState.firstName.value}
onChange={(e) => updateForm('firstName', e.target)}
required
// disabled={accountLoading}
id="signupFirstName"
/>
</div>
<div className="text-center space-top" style={{ marginTop: 12 }}>
<Button
type="primary"
htmlType="submit"
data-attr="signup"
disabled={state.submitted && !formState.password}
// loading={accountLoading}
>
Get Started
</Button>
</div>
{/* <div style={{ color: '#666666', marginBottom: 60, textAlign: 'center' }} className="space-top">
By clicking the button above you agree to our{' '}
<a href="https://signoz.io" target="_blank">
Terms of Service
</a>{' '}
and{' '}
<a href="https://signoz.io" target="_blank">
Privacy Policy
</a>
.
</div> */}
</form>
</div>
</Row>
</div>
);
};
export default withRouter(Signup);

61
frontend/src/modules/add-instrumentation/instrumentationPage.tsx
View File

@ -1,61 +0,0 @@
import { Space } from 'antd';
import React from 'react';
import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
import styled from 'styled-components';
import AppReducer from 'types/reducer/app';
const InstrumentCard = styled.div<{
isDarkMode: boolean;
}>`
border-radius: 4px;
background: ${({ isDarkMode }): string => (isDarkMode ? '#313131' : '#ddd')};
padding: 33px 23px;
max-width: 800px;
margin-top: 40px;
`;
const InstrumentationPage = (): JSX.Element => {
const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
return (
<React.Fragment>
<Space style={{ marginLeft: 60, marginTop: 48, display: 'block' }}>
<div>
<h2>Instrument your application</h2>
</div>
<InstrumentCard isDarkMode={isDarkMode}>
Congrats, you have successfully installed SigNoz!
<br />
To start seeing YOUR application data here, follow the instructions in the
docs -
<a
href={'https://signoz.io/docs/instrumentation/overview'}
target="_blank"
rel="noreferrer"
>
{' '}
https://signoz.io/docs/instrumentation/overview
</a>
<br />
If you face any issues, join our{' '}
<a
href={
'https://signoz-community.slack.com/join/shared_invite/zt-lrjknbbp-J_mI13rlw8pGF4EWBnorJA'
}
target="_blank"
rel="noreferrer"
>
slack community
</a>{' '}
to ask any questions or mail us at{' '}
<a href={'mailto:support@signoz.io'} target="_blank" rel="noreferrer">
support@signoz.io
</a>
</InstrumentCard>
</Space>
</React.Fragment>
);
};
export default InstrumentationPage;

47
frontend/src/pages/AddInstrumentation/index.tsx Normal file
View File

@ -0,0 +1,47 @@
import { Typography } from 'antd';
import React from 'react';
import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
import AppReducer from 'types/reducer/app';
import { Container, Heading } from './styles';
const InstrumentationPage = (): JSX.Element => {
const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
return (
<>
<Heading>Instrument your application</Heading>
<Container isDarkMode={isDarkMode}>
<Typography>Congrats, you have successfully installed SigNoz!</Typography>{' '}
<Typography>
To start seeing YOUR application data here, follow the instructions in the
docs -
</Typography>
<a
href={'https://signoz.io/docs/instrumentation/overview'}
target="_blank"
rel="noreferrer"
>
https://signoz.io/docs/instrumentation/overview
</a>
&nbsp;If you face any issues, join our
<a
href={
'https://signoz-community.slack.com/join/shared_invite/zt-lrjknbbp-J_mI13rlw8pGF4EWBnorJA'
}
target="_blank"
rel="noreferrer"
>
&nbsp;slack community&nbsp;
</a>
to ask any questions or mail us at&nbsp;
<a href={'mailto:support@signoz.io'} target="_blank" rel="noreferrer">
support@signoz.io
</a>
</Container>
</>
);
};
export default InstrumentationPage;

20
frontend/src/pages/AddInstrumentation/styles.ts Normal file
View File

@ -0,0 +1,20 @@
import { Card, Typography } from 'antd';
import styled from 'styled-components';
interface Props {
isDarkMode: boolean;
}
export const Container = styled(Card)<Props>`
border-radius: 4px;
background: ${({ isDarkMode }): string => (isDarkMode ? '#313131' : '#ddd')};
width: 80%;
`;
export const Heading = styled(Typography)`
&&& {
font-size: 2rem;
margin-bottom: 1rem;
}
`;

30
frontend/src/modules/Settings/settingsPage.tsx → frontend/src/pages/Settings/index.tsx
View File

@ -1,29 +1,23 @@
import { Form, Input, Space } from 'antd';
import { Alert } from 'antd';
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { AppState } from 'store/reducers';
import React, { useEffect } from 'react';
interface SettingsPageProps {}
const layout = {
labelCol: { span: 3 },
wrapperCol: { span: 6 },
};
const SettingsPage = (props: SettingsPageProps) => {
const SettingsPage = (): JSX.Element => {
const [form] = Form.useForm();
useEffect(() => {
form.setFieldsValue({
retention_period: '3 days',
});
});
}, [form]);
return (
<React.Fragment>
<>
<Form
{...layout}
labelCol={{
span: 3,
}}
wrapperCol={{ span: 6 }}
name="basic"
initialValues={{ remember: true }}
style={{ marginLeft: 20 }}
@ -44,12 +38,8 @@ const SettingsPage = (props: SettingsPageProps) => {
type="info"
/>
</Space>
</React.Fragment>
</>
);
};
const mapStateToProps = (state: AppState): {} => {
return {};
};
export default connect(mapStateToProps, {})(SettingsPage);
export default SettingsPage;

116
frontend/src/pages/SignUp/index.tsx Normal file
View File

@ -0,0 +1,116 @@
import { Button, Input, Typography } from 'antd';
import signup from 'api/user/signup';
import { IS_LOGGED_IN } from 'constants/auth';
import ROUTES from 'constants/routes';
import history from 'lib/history';
import React, { useState } from 'react';
import { ButtonContainer, Container, FormWrapper, Title } from './styles';
const Signup = (): JSX.Element => {
const [state, setState] = useState({ submitted: false });
const [formState, setFormState] = useState({
firstName: { value: '' },
companyName: { value: '' },
email: { value: '' },
password: { value: '', valid: true },
emailOptIn: { value: true },
});
const updateForm = (
name: string,
target: EventTarget & HTMLInputElement,
): void => {
if (name === 'firstName') {
setFormState({
...formState,
firstName: { ...formState.firstName, value: target.value },
});
} else if (name === 'email') {
setFormState({
...formState,
email: { ...formState.email, value: target.value },
});
}
};
const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
(async (): Promise<void> => {
try {
e.preventDefault();
setState((state) => ({ ...state, submitted: true }));
const payload = {
first_name: formState.firstName,
email: formState.email,
};
const response = await signup({
email: JSON.stringify(payload),
});
if (response.statusCode === 200) {
localStorage.setItem(IS_LOGGED_IN, 'yes');
history.push(ROUTES.APPLICATION);
} else {
// @TODO throw a error notification here
}
} catch (error) {
console.error(error);
// @TODO throw a error notification here
}
})();
};
return (
<div>
<Container direction="vertical">
<Title>Create your account</Title>
<Typography>
Monitor your applications. Find what is causing issues.
</Typography>
</Container>
<FormWrapper>
<img src={'signoz.svg'} alt="logo" />
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="signupEmail">Email</label>
<Input
placeholder="mike@netflix.com"
type="email"
value={formState.email.value}
onChange={(e): void => updateForm('email', e.target)}
required
id="signupEmail"
/>
</div>
<div>
<label htmlFor="signupFirstName">First Name</label>
<Input
placeholder="Mike"
autoFocus
value={formState.firstName.value}
onChange={(e): void => updateForm('firstName', e.target)}
required
id="signupFirstName"
/>
</div>
<ButtonContainer>
<Button
type="primary"
htmlType="submit"
data-attr="signup"
disabled={state.submitted && !formState.password}
>
Get Started
</Button>
</ButtonContainer>
</form>
</FormWrapper>
</div>
);
};
export default Signup;

27
frontend/src/pages/SignUp/styles.ts Normal file
View File

@ -0,0 +1,27 @@
import { Space, Typography } from 'antd';
import styled from 'styled-components';
export const Container = styled(Space)`
&&& {
padding-left: 2rem;
margin-top: 3rem;
}
`;
export const Title = styled(Typography)`
&&& {
font-size: 1rem;
font-weight: bold;
}
`;
export const FormWrapper = styled.div`
display: flex;
justify-content: center;
margin-top: 2rem;
`;
export const ButtonContainer = styled.div`
margin-top: 0.5rem;
`;

3
frontend/src/types/api/user/signup.ts Normal file
View File

@ -0,0 +1,3 @@
export interface Props {
email: string;
}