External/signoz
1
0
Fork 0
mirror of https://github.com/SigNoz/signoz.git synced 2025-12-24 02:46:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: Eslint fix config (#882)

Browse Source 
* chore: eslint config is updated

* chore: eslint auto fix is added
This commit is contained in:
palash-signoz 2022-03-22 12:10:31 +05:30 committed by GitHub
parent 4e335054fb
commit f1f606844a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
170 changed files with 1299 additions and 1215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/.eslintrc.js
View File

@ -3,17 +3,23 @@ module.exports = {
browser: true,
es2021: true,
node: true,
'jest/globals': true,
},
extends: [
'airbnb',
'airbnb-typescript',
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/eslint-recommended',
'plugin:prettier/recommended',
'plugin:sonarjs/recommended',
'plugin:import/errors',
'plugin:import/warnings',
],
parser: '@typescript-eslint/parser',
parserOptions: {
project: './tsconfig.json',
ecmaFeatures: {
jsx: true,
},
@ -26,10 +32,17 @@ module.exports = {
'simple-import-sort',
'react-hooks',
'prettier',
'jest',
],
settings: {
react: {
version: 'latest',
version: 'detect',
},
'import/resolver': {
node: {
paths: ['src'],
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
},
},
rules: {
@ -41,12 +54,13 @@ module.exports = {
],
'react/prop-types': 'off',
'@typescript-eslint/explicit-function-return-type': 'error',
'@typescript-eslint/no-var-requires': 0,
'react/no-array-index-key': 2,
'@typescript-eslint/no-var-requires': 'error',
'react/no-array-index-key': 'error',
'linebreak-style': [
'error',
process.platform === 'win32' ? 'windows' : 'unix',
],
'@typescript-eslint/default-param-last': 'off',
// simple sort error
'simple-import-sort/imports': 'error',
@ -54,7 +68,29 @@ module.exports = {
// hooks
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'warn',
'react-hooks/exhaustive-deps': 'error',
// airbnb
'no-underscore-dangle': 'off',
'no-console': 'off',
'import/prefer-default-export': 'off',
'import/extensions': [
'error',
'ignorePackages',
{
js: 'never',
jsx: 'never',
ts: 'never',
tsx: 'never',
},
],
// eslint rules need to remove
'no-shadow': 'off',
'@typescript-eslint/no-shadow': 'off',
'global-require': 'off',
'@typescript-eslint/no-var-requires': 'off',
'import/no-cycle': 'off',
'prettier/prettier': [
'error',

21
frontend/package.json
View File

@ -7,8 +7,8 @@
"dev": "cross-env NODE_ENV=development webpack serve --progress",
"build": "webpack --config=webpack.config.prod.js --progress",
"prettify": "prettier --write .",
"lint": "eslint . --debug",
"lint:fix": "eslint . --fix --debug",
"lint": "eslint ./src",
"lint:fix": "eslint ./src --fix",
"cypress:open": "cypress open",
"cypress:run": "cypress run",
"jest": "jest",
@ -22,11 +22,12 @@
"license": "ISC",
"dependencies": {
"@ant-design/icons": "^4.6.2",
"@monaco-editor/react": "^4.3.1",
"@grafana/data": "^8.4.3",
"@monaco-editor/react": "^4.3.1",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@welldone-software/why-did-you-render": "^6.2.1",
"antd": "4.19.2",
"axios": "^0.21.0",
"babel-eslint": "^10.1.0",
@ -74,7 +75,9 @@
"uuid": "^8.3.2",
"web-vitals": "^0.2.4",
"webpack": "^5.23.0",
"webpack-dev-server": "^4.3.1"
"webpack-dev-server": "^4.3.1",
"cypress": "^8.3.0",
"lodash-es": "^4.17.21"
},
"browserslist": {
"production": [
@ -103,6 +106,7 @@
"@types/d3-tip": "^3.5.5",
"@types/jest": "^26.0.15",
"@types/lodash-es": "^4.17.4",
"@types/mini-css-extract-plugin": "^2.5.1",
"@types/node": "^16.10.3",
"@types/react": "^17.0.0",
"@types/react-dom": "^16.9.9",
@ -117,17 +121,19 @@
"@types/webpack-dev-server": "^4.3.0",
"@typescript-eslint/eslint-plugin": "^4.28.2",
"@typescript-eslint/parser": "^4.28.2",
"@welldone-software/why-did-you-render": "^6.2.1",
"autoprefixer": "^9.0.0",
"babel-plugin-styled-components": "^1.12.0",
"compression-webpack-plugin": "^9.0.0",
"copy-webpack-plugin": "^8.1.0",
"critters-webpack-plugin": "^3.0.1",
"cypress": "^8.3.0",
"eslint": "^7.30.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^16.1.4",
"eslint-config-prettier": "^8.3.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jest": "^26.1.2",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-promise": "^5.1.0",
@ -138,7 +144,6 @@
"husky": "4.3.8",
"less-plugin-npm-import": "^2.1.0",
"lint-staged": "10.5.3",
"lodash-es": "^4.17.21",
"portfinder-sync": "^0.0.2",
"prettier": "2.2.1",
"react-hot-loader": "^4.13.0",

4
frontend/src/AppRoutes/index.tsx
View File

@ -11,7 +11,7 @@ import AppReducer from 'types/reducer/app';
import routes from './routes';
const App = (): JSX.Element => {
function App(): JSX.Element {
const { isLoggedIn } = useSelector<AppState, AppReducer>((state) => state.app);
return (
@ -39,6 +39,6 @@ const App = (): JSX.Element => {
</AppLayout>
</Router>
);
};
}
export default App;

4
frontend/src/api/ErrorResponseHandler.ts
View File

@ -2,7 +2,7 @@ import { AxiosError } from 'axios';
import { ErrorResponse } from 'types/api';
import { ErrorStatusCode } from 'types/common';
export const ErrorResponseHandler = (error: AxiosError): ErrorResponse => {
export function ErrorResponseHandler(error: AxiosError): ErrorResponse {
if (error.response) {
// client received an error response (5xx, 4xx)
// making the error status code as standard Error Status Code
@ -54,4 +54,4 @@ export const ErrorResponseHandler = (error: AxiosError): ErrorResponse => {
error: error.toString(),
message: null,
};
};
}

6
frontend/src/api/trace/getFilters.ts
View File

@ -29,9 +29,9 @@ const getFilters = async (
end: props.end,
getFilters: props.getFilters,
...nonDuration,
maxDuration: String((duration['duration'] || [])[0] || ''),
minDuration: String((duration['duration'] || [])[1] || ''),
exclude: exclude,
maxDuration: String((duration.duration || [])[0] || ''),
minDuration: String((duration.duration || [])[1] || ''),
exclude,
});
return {

4
frontend/src/api/trace/getSpans.ts
View File

@ -39,8 +39,8 @@ const getSpans = async (
step: props.step,
tags: updatedSelectedTags,
...nonDuration,
maxDuration: String((duration['duration'] || [])[0] || ''),
minDuration: String((duration['duration'] || [])[1] || ''),
maxDuration: String((duration.duration || [])[0] || ''),
minDuration: String((duration.duration || [])[1] || ''),
exclude,
},
);

4
frontend/src/api/trace/getSpansAggregate.ts
View File

@ -42,8 +42,8 @@ const getSpanAggregate = async (
...preProps,
tags: updatedSelectedTags,
...nonDuration,
maxDuration: String((duration['duration'] || [])[0] || ''),
minDuration: String((duration['duration'] || [])[1] || ''),
maxDuration: String((duration.duration || [])[0] || ''),
minDuration: String((duration.duration || [])[1] || ''),
exclude,
});

4
frontend/src/api/trace/getTagFilter.ts
View File

@ -20,8 +20,8 @@ const getTagFilters = async (
start: String(props.start),
end: String(props.end),
...nonDuration,
maxDuration: String((duration['duration'] || [])[0] || ''),
minDuration: String((duration['duration'] || [])[1] || ''),
maxDuration: String((duration.duration || [])[0] || ''),
minDuration: String((duration.duration || [])[1] || ''),
});
return {

6
frontend/src/assets/Dashboard/TimeSeries.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
const TimeSeries = (): JSX.Element => (
<React.Fragment>
function TimeSeries(): JSX.Element {
return (
<svg
width="81"
height="46"
@ -31,7 +31,7 @@ const TimeSeries = (): JSX.Element => (
/>
</defs>
</svg>
</React.Fragment>
);
}
export default TimeSeries;

6
frontend/src/assets/Dashboard/Value.tsx
View File

@ -1,8 +1,7 @@
import React from 'react';
const Value = (props: ValueProps): JSX.Element => {
function Value(props: ValueProps): JSX.Element {
return (
<React.Fragment>
<svg
width="78"
height="32"
@ -15,9 +14,8 @@ const Value = (props: ValueProps): JSX.Element => {
fill={props.fillColor}
/>
</svg>
</React.Fragment>
);
};
}
interface ValueProps {
fillColor: React.CSSProperties['color'];

4
frontend/src/assets/NotFound.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
const NotFound = (): JSX.Element => {
function NotFound(): JSX.Element {
return (
<svg
width="360"
@ -261,6 +261,6 @@ const NotFound = (): JSX.Element => {
</defs>
</svg>
);
};
}
export default NotFound;

6
frontend/src/components/Editor/index.tsx
View File

@ -1,17 +1,17 @@
import MEditor from '@monaco-editor/react';
import React from 'react';
const Editor = ({ value }: EditorProps): JSX.Element => {
function Editor({ value }: EditorProps): JSX.Element {
return (
<MEditor
theme="vs-dark"
defaultLanguage="yaml"
value={value.current}
options={{ fontSize: 16, automaticLayout: true }}
height={'40vh'}
height="40vh"
/>
);
};
}
interface EditorProps {
value: React.MutableRefObject<string>;

2
frontend/src/components/Graph/Plugin/Legend.ts
View File

@ -68,7 +68,7 @@ export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => {
const boxSpan = document.createElement('span');
boxSpan.style.background = item.strokeStyle || colors[0];
boxSpan.style.borderColor = item?.strokeStyle;
boxSpan.style.borderWidth = item.lineWidth + 'px';
boxSpan.style.borderWidth = `${item.lineWidth}px`;
boxSpan.style.display = 'inline-block';
boxSpan.style.minHeight = '20px';
boxSpan.style.marginRight = '10px';

18
frontend/src/components/Graph/index.tsx
View File

@ -27,6 +27,8 @@ import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
import AppReducer from 'types/reducer/app';
import { legend } from './Plugin';
import { LegendsContainer } from './styles';
import { useXAxisTimeUnit } from './xAxisConfig';
import { getYAxisFormattedValue } from './yAxisConfig';
@ -47,10 +49,8 @@ Chart.register(
BarController,
BarElement,
);
import { legend } from './Plugin';
import { LegendsContainer } from './styles';
const Graph = ({
function Graph({
data,
type,
title,
@ -58,7 +58,7 @@ const Graph = ({
onClickHandler,
name,
yAxisUnit = 'short',
}: GraphProps): JSX.Element => {
}: GraphProps): JSX.Element {
const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
const chartRef = useRef<HTMLCanvasElement>(null);
const currentTheme = isDarkMode ? 'dark' : 'light';
@ -94,7 +94,7 @@ const Graph = ({
},
plugins: {
title: {
display: title === undefined ? false : true,
display: title !== undefined,
text: title,
},
legend: {
@ -137,7 +137,7 @@ const Graph = ({
},
ticks: {
// Include a dollar sign in the ticks
callback: function (value, index, ticks) {
callback(value, index, ticks) {
return getYAxisFormattedValue(value, yAxisUnit);
},
},
@ -160,8 +160,8 @@ const Graph = ({
};
lineChartRef.current = new Chart(chartRef.current, {
type: type,
data: data,
type,
data,
options,
plugins: [legend(name, data.datasets.length > 3)],
});
@ -178,7 +178,7 @@ const Graph = ({
<LegendsContainer id={name} />
</div>
);
};
}
interface GraphProps {
type: ChartType;

3
frontend/src/components/Graph/xAxisConfig.ts
View File

@ -104,12 +104,11 @@ export const useXAxisTimeUnit = (data: Chart['data']): IAxisTimeConfig => {
minTime: localTime.minTime,
maxTime: localTime.maxTime,
};
} else {
}
return {
minTime: globalTime.minTime / 1e6,
maxTime: globalTime.maxTime / 1e6,
};
}
}, [globalTime, localTime]);
return convertTimeRange(minTime, maxTime);

6
frontend/src/components/Input/index.tsx
View File

@ -1,7 +1,7 @@
import { Form, Input, InputProps } from 'antd';
import React from 'react';
const InputComponent = ({
function InputComponent({
value,
type = 'text',
onChangeHandler,
@ -14,7 +14,8 @@ const InputComponent = ({
labelOnTop,
addonBefore,
...props
}: InputComponentProps): JSX.Element => (
}: InputComponentProps): JSX.Element {
return (
<Form.Item labelCol={{ span: labelOnTop ? 24 : 4 }} label={label}>
<Input
placeholder={placeholder}
@ -30,6 +31,7 @@ const InputComponent = ({
/>
</Form.Item>
);
}
interface InputComponentProps extends InputProps {
value: InputProps['value'];

8
frontend/src/components/Modal.tsx
View File

@ -1,15 +1,14 @@
import { Modal, ModalProps as Props } from 'antd';
import React, { ReactElement } from 'react';
const CustomModal = ({
function CustomModal({
title,
children,
isModalVisible,
footer,
closable = true,
}: ModalProps): JSX.Element => {
}: ModalProps): JSX.Element {
return (
<>
<Modal
title={title}
visible={isModalVisible}
@ -18,9 +17,8 @@ const CustomModal = ({
>
{children}
</Modal>
</>
);
};
}
interface ModalProps {
isModalVisible: boolean;

4
frontend/src/components/NotFound/index.tsx
View File

@ -4,7 +4,7 @@ import React from 'react';
import { Button, Container, Text, TextContainer } from './styles';
const NotFound = (): JSX.Element => {
function NotFound(): JSX.Element {
return (
<Container>
<NotFoundImage />
@ -19,6 +19,6 @@ const NotFound = (): JSX.Element => {
</Button>
</Container>
);
};
}
export default NotFound;

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

@ -1,15 +1,15 @@
import { Tabs, TabsProps } from 'antd';
import history from 'lib/history';
import React from 'react';
const { TabPane } = Tabs;
import history from 'lib/history';
const RouteTab = ({
function RouteTab({
routes,
activeKey,
onChangeHandler,
...rest
}: RouteTabProps & TabsProps): JSX.Element => {
}: RouteTabProps & TabsProps): JSX.Element {
const onChange = (activeRoute: string) => {
onChangeHandler && onChangeHandler();
@ -36,7 +36,7 @@ const RouteTab = ({
)}
</Tabs>
);
};
}
interface RouteTabProps {
routes: {

4
frontend/src/components/Spinner/index.tsx
View File

@ -4,11 +4,13 @@ import React from 'react';
import { SpinerStyle } from './styles';
const Spinner = ({ size, tip, height }: SpinnerProps): JSX.Element => (
function Spinner({ size, tip, height }: SpinnerProps): JSX.Element {
return (
<SpinerStyle height={height}>
<Spin spinning size={size} tip={tip} indicator={<LoadingOutlined spin />} />
</SpinerStyle>
);
}
interface SpinnerProps {
size?: SpinProps['size'];

4
frontend/src/components/Styled/index.ts
View File

@ -2,9 +2,7 @@ import * as AntD from 'antd';
import { TextProps } from 'antd/lib/typography/Text';
import { TitleProps } from 'antd/lib/typography/Title';
import React from 'react';
import styled, {
FlattenSimpleInterpolation,
} from 'styled-components';
import styled, { FlattenSimpleInterpolation } from 'styled-components';
import { IStyledClass } from './types';

6
frontend/src/components/TextToolTip/index.tsx
View File

@ -2,13 +2,14 @@ import { QuestionCircleFilled } from '@ant-design/icons';
import { Tooltip } from 'antd';
import React from 'react';
const TextToolTip = ({ text, url }: TextToolTipProps) => (
function TextToolTip({ text, url }: TextToolTipProps) {
return (
<Tooltip
overlay={() => {
return (
<div>
{`${text} `}
<a href={url} rel="noopener noreferrer" target={'_blank'}>
<a href={url} rel="noopener noreferrer" target="_blank">
here
</a>
</div>
@ -18,6 +19,7 @@ const TextToolTip = ({ text, url }: TextToolTipProps) => (
<QuestionCircleFilled style={{ fontSize: '1.3125rem' }} />
</Tooltip>
);
}
interface TextToolTipProps {
url: string;

6
frontend/src/components/TimePreferenceDropDown/index.tsx
View File

@ -7,10 +7,10 @@ import React, { useCallback } from 'react';
import { TextContainer } from './styles';
const TimePreference = ({
function TimePreference({
setSelectedTime,
selectedTime,
}: TimePreferenceDropDownProps): JSX.Element => {
}: TimePreferenceDropDownProps): JSX.Element {
const timeMenuItemOnChangeHandler = useCallback(
(event: TimeMenuItemOnChangeHandlerEvent) => {
const selectedTime = timeItems.find((e) => e.enum === event.key);
@ -38,7 +38,7 @@ const TimePreference = ({
</Dropdown>
</TextContainer>
);
};
}
interface TimeMenuItemOnChangeHandlerEvent {
key: timePreferenceType | string;

6
frontend/src/components/ValueGraph/index.tsx
View File

@ -2,9 +2,9 @@ import React from 'react';
import { Value } from './styles';
const ValueGraph = ({ value }: ValueGraphProps): JSX.Element => (
<Value>{value}</Value>
);
function ValueGraph({ value }: ValueGraphProps): JSX.Element {
return <Value>{value}</Value>;
}
interface ValueGraphProps {
value: string;

4
frontend/src/container/AllAlertChannels/AlertChannels.tsx
View File

@ -9,7 +9,7 @@ import { Channels, PayloadProps } from 'types/api/channels/getAll';
import Delete from './Delete';
const AlertChannels = ({ allChannels }: AlertChannelsProps): JSX.Element => {
function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
const [notifications, Element] = notification.useNotification();
const [channels, setChannels] = useState<Channels[]>(allChannels);
@ -55,7 +55,7 @@ const AlertChannels = ({ allChannels }: AlertChannelsProps): JSX.Element => {
<Table rowKey="id" dataSource={channels} columns={columns} />
</>
);
};
}
interface AlertChannelsProps {
allChannels: PayloadProps;

8
frontend/src/container/AllAlertChannels/Delete.tsx
View File

@ -4,11 +4,7 @@ import deleteAlert from 'api/channels/delete';
import React, { useState } from 'react';
import { Channels } from 'types/api/channels/getAll';
const Delete = ({
notifications,
setChannels,
id,
}: DeleteProps): JSX.Element => {
function Delete({ notifications, setChannels, id }: DeleteProps): JSX.Element {
const [loading, setLoading] = useState(false);
const onClickHandler = async (): Promise<void> => {
@ -50,7 +46,7 @@ const Delete = ({
Delete
</Button>
);
};
}
interface DeleteProps {
notifications: NotificationInstance;

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

@ -7,12 +7,13 @@ import ROUTES from 'constants/routes';
import useFetch from 'hooks/useFetch';
import history from 'lib/history';
import React, { useCallback } from 'react';
const { Paragraph } = Typography;
import AlertChannlesComponent from './AlertChannels';
import { Button, ButtonContainer } from './styles';
const AlertChannels = (): JSX.Element => {
const { Paragraph } = Typography;
function AlertChannels(): JSX.Element {
const onToggleHandler = useCallback(() => {
history.push(ROUTES.CHANNELS_NEW);
}, []);
@ -24,7 +25,7 @@ const AlertChannels = (): JSX.Element => {
}
if (loading || payload === undefined) {
return <Spinner tip="Loading Channels.." height={'90vh'} />;
return <Spinner tip="Loading Channels.." height="90vh" />;
}
return (
@ -36,7 +37,7 @@ const AlertChannels = (): JSX.Element => {
<div>
<TextToolTip
text={`More details on how to setting notification channels`}
text="More details on how to setting notification channels"
url="https://signoz.io/docs/userguide/alerts-management/#setting-notification-channel"
/>
@ -49,6 +50,6 @@ const AlertChannels = (): JSX.Element => {
<AlertChannlesComponent allChannels={payload} />
</>
);
};
}
export default AlertChannels;

4
frontend/src/container/AppLayout/index.tsx
View File

@ -20,11 +20,9 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
if (!isLoggedIn) {
setIsSignUpPage(true);
history.push(ROUTES.SIGN_UP);
} else {
if (isSignUpPage) {
} else if (isSignUpPage) {
setIsSignUpPage(false);
}
}
}, [isLoggedIn, isSignUpPage]);
return (

10
frontend/src/container/CreateAlertChannels/index.tsx
View File

@ -7,9 +7,9 @@ import React, { useCallback, useState } from 'react';
import { ChannelType, SlackChannel } from './config';
const CreateAlertChannels = ({
function CreateAlertChannels({
preType = 'slack',
}: CreateAlertChannelsProps): JSX.Element => {
}: CreateAlertChannelsProps): JSX.Element {
const [formInstance] = Form.useForm();
const [selectedConfig, setSelectedConfig] = useState<Partial<SlackChannel>>({
text: ` {{ range .Alerts -}}
@ -87,7 +87,6 @@ const CreateAlertChannels = ({
);
return (
<>
<FormAlertChannels
{...{
formInstance,
@ -100,14 +99,13 @@ const CreateAlertChannels = ({
NotificationElement,
title: 'New Notification Channels',
initialValue: {
type: type,
type,
...selectedConfig,
},
}}
/>
</>
);
};
}
interface CreateAlertChannelsProps {
preType?: ChannelType;

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

@ -11,9 +11,9 @@ import { Store } from 'rc-field-form/lib/interface';
import React, { useCallback, useState } from 'react';
import { useParams } from 'react-router';
const EditAlertChannels = ({
function EditAlertChannels({
initialValue,
}: EditAlertChannelsProps): JSX.Element => {
}: EditAlertChannelsProps): JSX.Element {
const [formInstance] = Form.useForm();
const [selectedConfig, setSelectedConfig] = useState<Partial<SlackChannel>>({
...initialValue,
@ -72,7 +72,6 @@ const EditAlertChannels = ({
}, []);
return (
<>
<FormAlertChannels
{...{
formInstance,
@ -88,9 +87,8 @@ const EditAlertChannels = ({
nameDisable: true,
}}
/>
</>
);
};
}
interface EditAlertChannelsProps {
initialValue: Store;

7
frontend/src/container/EditRules/index.tsx
View File

@ -1,6 +1,5 @@
import { SaveFilled } from '@ant-design/icons';
import { Button } from 'antd';
import { notification } from 'antd';
import { Button, notification } from 'antd';
import put from 'api/alerts/put';
import Editor from 'components/Editor';
import ROUTES from 'constants/routes';
@ -12,7 +11,7 @@ import { PayloadProps as PutPayloadProps } from 'types/api/alerts/put';
import { ButtonContainer } from './styles';
const EditRules = ({ initialData, ruleId }: EditRulesProps): JSX.Element => {
function EditRules({ initialData, ruleId }: EditRulesProps): JSX.Element {
const value = useRef<string>(initialData);
const [notifications, Element] = notification.useNotification();
const [editButtonState, setEditButtonState] = useState<State<PutPayloadProps>>(
@ -93,7 +92,7 @@ const EditRules = ({ initialData, ruleId }: EditRulesProps): JSX.Element => {
</ButtonContainer>
</>
);
};
}
interface EditRulesProps {
initialData: PayloadProps['data'];

8
frontend/src/container/FormAlertChannels/Settings/Slack.tsx
View File

@ -6,7 +6,8 @@ import { SlackChannel } from '../../CreateAlertChannels/config';
const { TextArea } = Input;
const Slack = ({ setSelectedConfig }: SlackProps): JSX.Element => (
function Slack({ setSelectedConfig }: SlackProps): JSX.Element {
return (
<>
<FormItem name="api_url" label="Webhook URL">
<Input
@ -21,9 +22,7 @@ const Slack = ({ setSelectedConfig }: SlackProps): JSX.Element => (
<FormItem
name="channel"
help={
'Specify channel or user, use #channel-name, @username (has to be all lowercase, no whitespace),'
}
help="Specify channel or user, use #channel-name, @username (has to be all lowercase, no whitespace),"
label="Recipient"
>
<Input
@ -62,6 +61,7 @@ const Slack = ({ setSelectedConfig }: SlackProps): JSX.Element => (
</FormItem>
</>
);
}
interface SlackProps {
setSelectedConfig: React.Dispatch<React.SetStateAction<Partial<SlackChannel>>>;

15
frontend/src/container/FormAlertChannels/index.tsx
View File

@ -1,20 +1,21 @@
import { Form, FormInstance, Input, Select, Typography } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import ROUTES from 'constants/routes';
import {
ChannelType,
SlackChannel,
} from 'container/CreateAlertChannels/config';
import React from 'react';
const { Option } = Select;
const { Title } = Typography;
import ROUTES from 'constants/routes';
import history from 'lib/history';
import { Store } from 'rc-field-form/lib/interface';
import React from 'react';
import SlackSettings from './Settings/Slack';
import { Button } from './styles';
const FormAlertChannels = ({
const { Option } = Select;
const { Title } = Typography;
function FormAlertChannels({
formInstance,
type,
setSelectedConfig,
@ -26,7 +27,7 @@ const FormAlertChannels = ({
title,
initialValue,
nameDisable = false,
}: FormAlertChannelsProps): JSX.Element => {
}: FormAlertChannelsProps): JSX.Element {
return (
<>
{NotificationElement}
@ -81,7 +82,7 @@ const FormAlertChannels = ({
</Form>
</>
);
};
}
interface FormAlertChannelsProps {
formInstance: FormInstance;

5
frontend/src/container/GantChart/SpanLength/index.tsx
View File

@ -8,6 +8,7 @@ import React from 'react';
import { toFixed } from 'utils/toFixed';
import { SpanBorder, SpanLine, SpanText, SpanWrapper } from './styles';
interface SpanLengthProps {
width: string;
leftOffset: string;
@ -18,7 +19,7 @@ interface SpanLengthProps {
intervalUnit: IIntervalUnit;
}
const SpanLength = (props: SpanLengthProps): JSX.Element => {
function SpanLength(props: SpanLengthProps): JSX.Element {
const { width, leftOffset, bgColor, intervalUnit } = props;
const { isDarkMode } = useThemeMode();
return (
@ -31,6 +32,6 @@ const SpanLength = (props: SpanLengthProps): JSX.Element => {
)} ${intervalUnit.name}`}</SpanText>
</SpanWrapper>
);
};
}
export default SpanLength;

6
frontend/src/container/GantChart/SpanName/index.tsx
View File

@ -9,10 +9,10 @@ import {
SpanWrapper,
} from './styles';
const SpanNameComponent = ({
function SpanNameComponent({
name,
serviceName,
}: SpanNameComponent): JSX.Element => {
}: SpanNameComponent): JSX.Element {
return (
<Container title={`${name} ${serviceName}`}>
<SpanWrapper>
@ -21,7 +21,7 @@ const SpanNameComponent = ({
</SpanWrapper>
</Container>
);
};
}
interface SpanNameComponent {
name: string;

8
frontend/src/container/GantChart/Trace/index.tsx
View File

@ -20,7 +20,7 @@ import {
Wrapper,
} from './styles';
const Trace = (props: TraceProps): JSX.Element => {
function Trace(props: TraceProps): JSX.Element {
const {
name,
activeHoverId,
@ -108,7 +108,6 @@ const Trace = (props: TraceProps): JSX.Element => {
const panelWidth = SPAN_DETAILS_LEFT_COL_WIDTH - level * (16 + 1) - 48;
return (
<>
<Wrapper
onMouseEnter={onMouseEnterHandler}
onMouseLeave={onMouseLeaveHandler}
@ -140,7 +139,7 @@ const Trace = (props: TraceProps): JSX.Element => {
</Col>
</StyledRow>
</StyledCol>
<Col flex={'1'}>
<Col flex="1">
<SpanLength
leftOffset={nodeLeftOffset.toString()}
width={width.toString()}
@ -173,9 +172,8 @@ const Trace = (props: TraceProps): JSX.Element => {
</>
)}
</Wrapper>
</>
);
};
}
interface ITraceGlobal {
globalSpread: ITraceMetaData['spread'];

6
frontend/src/container/GantChart/index.tsx
View File

@ -7,7 +7,7 @@ import { CardContainer, CardWrapper, CollapseButton, Wrapper } from './styles';
import Trace from './Trace';
import { getSpanPath } from './utils';
const GanttChart = (props: GanttChartProps): JSX.Element => {
function GanttChart(props: GanttChartProps): JSX.Element {
const {
data,
traceMetaData,
@ -36,7 +36,6 @@ const GanttChart = (props: GanttChartProps): JSX.Element => {
setIsExpandAll((prev) => !prev);
};
return (
<>
<Wrapper>
<CardContainer>
<CollapseButton
@ -65,9 +64,8 @@ const GanttChart = (props: GanttChartProps): JSX.Element => {
</CardWrapper>
</CardContainer>
</Wrapper>
</>
);
};
}
export interface ITraceMetaData {
globalEnd: number;

10
frontend/src/container/GantChart/utils.ts
View File

@ -11,7 +11,7 @@ export const getMetaDataFromSpanTree = (treeData: ITraceTree) => {
}
totalSpans++;
levels = Math.max(levels, level);
const startTime = treeNode.startTime;
const { startTime } = treeNode;
const endTime = startTime + treeNode.value;
globalStart = Math.min(globalStart, startTime);
globalEnd = Math.max(globalEnd, endTime);
@ -22,8 +22,8 @@ export const getMetaDataFromSpanTree = (treeData: ITraceTree) => {
};
traverse(treeData, 1);
globalStart = globalStart * 1e6;
globalEnd = globalEnd * 1e6;
globalStart *= 1e6;
globalEnd *= 1e6;
return {
globalStart,
@ -37,7 +37,7 @@ export const getMetaDataFromSpanTree = (treeData: ITraceTree) => {
export function getTopLeftFromBody(elem: HTMLElement) {
const box = elem.getBoundingClientRect();
const body = document.body;
const { body } = document;
const docEl = document.documentElement;
const scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
@ -56,7 +56,7 @@ export const getNodeById = (
searchingId: string,
treeData: ITraceTree,
): ITraceTree | undefined => {
let foundNode: ITraceTree | undefined = undefined;
let foundNode: ITraceTree | undefined;
const traverse = (treeNode: ITraceTree, level = 0) => {
if (!treeNode) {
return;

8
frontend/src/container/GeneralSettings/Retention.tsx
View File

@ -12,13 +12,13 @@ import {
Typography,
} from './styles';
const Retention = ({
function Retention({
retentionValue,
setRentionValue,
selectedRetentionPeroid,
setSelectedRetentionPeroid,
text,
}: RetentionProps): JSX.Element => {
}: RetentionProps): JSX.Element {
const options: Option[] = [
{
key: 'hr',
@ -58,7 +58,7 @@ const Retention = ({
e: React.ChangeEvent<HTMLInputElement>,
func: React.Dispatch<React.SetStateAction<string>>,
): void => {
const value = e.target.value;
const { value } = e.target;
const integerValue = parseInt(value, 10);
if (value.length > 0 && integerValue.toString() === value) {
@ -89,7 +89,7 @@ const Retention = ({
</Dropdown>
</RetentionContainer>
);
};
}
interface Option {
key: SettingPeroid;

8
frontend/src/container/GeneralSettings/index.tsx
View File

@ -18,7 +18,7 @@ import {
ToolTipContainer,
} from './styles';
const GeneralSettings = (): JSX.Element => {
function GeneralSettings(): JSX.Element {
const [
selectedMetricsPeroid,
setSelectedMetricsPeroid,
@ -207,7 +207,7 @@ const GeneralSettings = (): JSX.Element => {
)}
<Retention
text={'Retention Period for Metrics'}
text="Retention Period for Metrics"
selectedRetentionPeroid={selectedMetricsPeroid}
setRentionValue={setRetentionPeroidMetrics}
retentionValue={retentionPeroidMetrics}
@ -215,7 +215,7 @@ const GeneralSettings = (): JSX.Element => {
/>
<Retention
text={'Retention Period for Traces'}
text="Retention Period for Traces"
selectedRetentionPeroid={selectedTracePeroid}
setRentionValue={setRetentionPeroidTrace}
retentionValue={retentionPeroidTrace}
@ -250,7 +250,7 @@ const GeneralSettings = (): JSX.Element => {
</ButtonContainer>
</Container>
);
};
}
export type SettingPeroid = 'hr' | 'day' | 'month';

10
frontend/src/container/GridGraphComponent/index.tsx
View File

@ -8,7 +8,7 @@ import React from 'react';
import { TitleContainer, ValueContainer } from './styles';
const GridGraphComponent = ({
function GridGraphComponent({
GRAPH_TYPES,
data,
title,
@ -17,7 +17,7 @@ const GridGraphComponent = ({
onClickHandler,
name,
yAxisUnit,
}: GridGraphComponentProps): JSX.Element | null => {
}: GridGraphComponentProps): JSX.Element | null {
const location = history.location.pathname;
const isDashboardPage = location.split('/').length === 3;
@ -32,9 +32,9 @@ const GridGraphComponent = ({
isStacked,
opacity,
xAxisType: 'time',
onClickHandler: onClickHandler,
onClickHandler,
name,
yAxisUnit: yAxisUnit,
yAxisUnit,
}}
/>
);
@ -64,7 +64,7 @@ const GridGraphComponent = ({
}
return null;
};
}
export interface GridGraphComponentProps {
GRAPH_TYPES: GRAPH_TYPES;

6
frontend/src/container/GridGraphLayout/AddWidget/index.tsx
View File

@ -14,7 +14,7 @@ import DashboardReducer from 'types/reducer/dashboards';
import { Button, Container } from './styles';
const AddWidget = ({ toggleAddWidget }: Props): JSX.Element => {
function AddWidget({ toggleAddWidget }: Props): JSX.Element {
const { isAddWidget } = useSelector<AppState, DashboardReducer>(
(state) => state.dashboards,
);
@ -26,17 +26,15 @@ const AddWidget = ({ toggleAddWidget }: Props): JSX.Element => {
return (
<Container>
{!isAddWidget ? (
<>
<Button onClick={onToggleHandler} icon={<PlusOutlined />}>
Add Widgets
</Button>
</>
) : (
<Typography>Click a widget icon to add it here</Typography>
)}
</Container>
);
};
}
interface DispatchProps {
toggleAddWidget: (

6
frontend/src/container/GridGraphLayout/Graph/Bar/index.tsx
View File

@ -9,11 +9,11 @@ import { Widgets } from 'types/api/dashboard/getAll';
import { Container } from './styles';
const Bar = ({
function Bar({
widget,
onViewFullScreenHandler,
onDeleteHandler,
}: BarProps): JSX.Element => {
}: BarProps): JSX.Element {
const { push } = useHistory();
const { pathname } = useLocation();
@ -29,7 +29,7 @@ const Bar = ({
<DeleteOutlined onClick={onDeleteHandler} />
</Container>
);
};
}
interface BarProps {
widget: Widgets;

10
frontend/src/container/GridGraphLayout/Graph/FullView/EmptyGraph.tsx
View File

@ -10,11 +10,11 @@ import { AppState } from 'store/reducers';
import { Widgets } from 'types/api/dashboard/getAll';
import { GlobalReducer } from 'types/reducer/globalTime';
const EmptyGraph = ({
function EmptyGraph({
selectedTime,
widget,
onClickHandler,
}: EmptyGraphProps): JSX.Element => {
}: EmptyGraphProps): JSX.Element {
const { minTime, maxTime, loading } = useSelector<AppState, GlobalReducer>(
(state) => state.globalTime,
);
@ -47,7 +47,7 @@ const EmptyGraph = ({
while (endDate >= startDate) {
const newDate = new Date(startDate);
startDate = startDate + 20000;
startDate += 20000;
dates.push(newDate);
}
@ -62,7 +62,7 @@ const EmptyGraph = ({
<Graph
{...{
type: 'line',
onClickHandler: onClickHandler,
onClickHandler,
data: {
datasets: [
{
@ -79,7 +79,7 @@ const EmptyGraph = ({
}}
/>
);
};
}
interface EmptyGraphProps {
selectedTime: timePreferance;

8
frontend/src/container/GridGraphLayout/Graph/FullView/index.tsx
View File

@ -26,14 +26,14 @@ import { GlobalReducer } from 'types/reducer/globalTime';
import EmptyGraph from './EmptyGraph';
import { NotFoundContainer, TimeContainer } from './styles';
const FullView = ({
function FullView({
widget,
fullViewOptions = true,
onClickHandler,
noDataGraph = false,
name,
yAxisUnit,
}: FullViewProps): JSX.Element => {
}: FullViewProps): JSX.Element {
const { minTime, maxTime, selectedTime: globalSelectedTime } = useSelector<
AppState,
GlobalReducer
@ -220,7 +220,7 @@ const FullView = ({
isStacked: widget.isStacked,
opacity: widget.opacity,
title: widget.title,
onClickHandler: onClickHandler,
onClickHandler,
name,
yAxisUnit,
}}
@ -228,7 +228,7 @@ const FullView = ({
{/* </GraphContainer> */}
</>
);
};
}
interface FullViewState {
loading: boolean;

19
frontend/src/container/GridGraphLayout/Graph/index.tsx
View File

@ -8,8 +8,7 @@ import getChartData from 'lib/getChartData';
import GetMaxMinTime from 'lib/getMaxMinTime';
import GetStartAndEndTime from 'lib/getStartAndEndTime';
import React, { useCallback, useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { connect } from 'react-redux';
import { connect, useSelector } from 'react-redux';
import { bindActionCreators, Dispatch } from 'redux';
import { ThunkDispatch } from 'redux-thunk';
import {
@ -25,13 +24,13 @@ import Bar from './Bar';
import FullView from './FullView';
import { ErrorContainer, FullViewContainer, Modal } from './styles';
const GridCardGraph = ({
function GridCardGraph({
widget,
deleteWidget,
isDeleted,
name,
yAxisUnit
}: GridCardGraphProps): JSX.Element => {
yAxisUnit,
}: GridCardGraphProps): JSX.Element {
const [state, setState] = useState<GridCardGraphState>({
loading: true,
errorMessage: '',
@ -66,7 +65,7 @@ const GridCardGraph = ({
const result = await getQueryResult({
end,
query: query.query,
start: start,
start,
step: '60',
});
@ -150,7 +149,11 @@ const GridCardGraph = ({
destroyOnClose
>
<FullViewContainer>
<FullView name={name + 'expanded'} widget={widget} yAxisUnit={yAxisUnit} />
<FullView
name={`${name}expanded`}
widget={widget}
yAxisUnit={yAxisUnit}
/>
</FullViewContainer>
</Modal>
</>
@ -205,7 +208,7 @@ const GridCardGraph = ({
/>
</>
);
};
}
interface GridCardGraphState {
loading: boolean;

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

@ -22,7 +22,7 @@ import {
} from './styles';
import { updateDashboard } from './utils';
const GridGraph = (): JSX.Element => {
function GridGraph(): JSX.Element {
const { dashboards, loading } = useSelector<AppState, DashboardReducer>(
(state) => state.dashboards,
);
@ -59,7 +59,7 @@ const GridGraph = (): JSX.Element => {
x: (index % 2) * 6,
Component: (): JSX.Element => (
<Graph
name={e.id + index + 'non-expanded'}
name={`${e.id + index}non-expanded`}
isDeleted={isDeleted}
widget={widgets[index]}
yAxisUnit={e.yAxisUnit}
@ -67,7 +67,7 @@ const GridGraph = (): JSX.Element => {
),
};
});
} else {
}
return data.layout
.filter((_, index) => widgets[index])
.map((e, index) => ({
@ -86,7 +86,6 @@ const GridGraph = (): JSX.Element => {
return <></>;
},
}));
}
}, [widgets, data.layout]);
useEffect(() => {
@ -142,7 +141,7 @@ const GridGraph = (): JSX.Element => {
data,
generateWidgetId,
graphType,
selectedDashboard: selectedDashboard,
selectedDashboard,
layout: allLayouts
.map((e, index) => ({
...e,
@ -253,7 +252,7 @@ const GridGraph = (): JSX.Element => {
</ReactGridLayout>
</>
);
};
}
interface LayoutProps extends Layout {
Component: () => JSX.Element;

2
frontend/src/container/GridGraphLayout/utils.ts
View File

@ -43,7 +43,7 @@ export const updateDashboard = async ({
title: '',
},
],
layout: layout,
layout,
});
if (response.statusCode === 200) {

10
frontend/src/container/Header/Breadcrumbs/index.tsx
View File

@ -1,6 +1,7 @@
import { Breadcrumb } from 'antd';
import ROUTES from 'constants/routes';
import React from 'react';
import { RouteComponentProps, withRouter } from 'react-router';
import { Link } from 'react-router-dom';
const breadcrumbNameMap = {
@ -13,9 +14,7 @@ const breadcrumbNameMap = {
[ROUTES.DASHBOARD]: 'Dashboard',
};
import { RouteComponentProps, withRouter } from 'react-router';
const ShowBreadcrumbs = (props: RouteComponentProps): JSX.Element => {
function ShowBreadcrumbs(props: RouteComponentProps): JSX.Element {
const pathArray = props.location.pathname.split('/').filter((i) => i);
const extraBreadcrumbItems = pathArray.map((_, index) => {
@ -27,13 +26,12 @@ const ShowBreadcrumbs = (props: RouteComponentProps): JSX.Element => {
<Link to={url}>{url.split('/').slice(-1)[0]}</Link>
</Breadcrumb.Item>
);
} else {
}
return (
<Breadcrumb.Item key={url}>
<Link to={url}>{breadcrumbNameMap[url]}</Link>
</Breadcrumb.Item>
);
}
});
const breadcrumbItems = [
@ -43,6 +41,6 @@ const ShowBreadcrumbs = (props: RouteComponentProps): JSX.Element => {
].concat(extraBreadcrumbItems);
return <Breadcrumb>{breadcrumbItems}</Breadcrumb>;
};
}
export default withRouter(ShowBreadcrumbs);

16
frontend/src/container/Header/CustomDateTimeModal/index.tsx
View File

@ -1,16 +1,17 @@
import { Modal } from 'antd';
import React, { useState } from 'react';
export type DateTimeRangeType = [Dayjs | null, Dayjs | null] | null;
import DatePicker from 'components/DatePicker';
import dayjs, { Dayjs } from 'dayjs';
import React, { useState } from 'react';
export type DateTimeRangeType = [Dayjs | null, Dayjs | null] | null;
const { RangePicker } = DatePicker;
const CustomDateTimeModal = ({
function CustomDateTimeModal({
visible,
onCreate,
onCancel,
}: CustomDateTimeModalProps): JSX.Element => {
}: CustomDateTimeModalProps): JSX.Element {
const [
customDateTimeRange,
setCustomDateTimeRange,
@ -23,9 +24,8 @@ const CustomDateTimeModal = ({
function disabledDate(current: Dayjs): boolean {
if (current > dayjs()) {
return true;
} else {
return false;
}
return false;
}
return (
@ -36,7 +36,7 @@ const CustomDateTimeModal = ({
cancelText="Cancel"
onCancel={onCancel}
style={{ position: 'absolute', top: 60, right: 40 }}
onOk={(): void => onCreate(customDateTimeRange ? customDateTimeRange : null)}
onOk={(): void => onCreate(customDateTimeRange || null)}
>
<RangePicker
disabledDate={disabledDate}
@ -45,7 +45,7 @@ const CustomDateTimeModal = ({
/>
</Modal>
);
};
}
interface CustomDateTimeModalProps {
visible: boolean;

6
frontend/src/container/Header/DateTimeSelection/Refresh.tsx
View File

@ -2,9 +2,7 @@ import React, { useEffect, useState } from 'react';
import { RefreshTextContainer, Typography } from './styles';
const RefreshText = ({
onLastRefreshHandler,
}: RefreshTextProps): JSX.Element => {
function RefreshText({ onLastRefreshHandler }: RefreshTextProps): JSX.Element {
const [refreshText, setRefreshText] = useState<string>('');
// this is to update the refresh text
@ -25,7 +23,7 @@ const RefreshText = ({
<Typography>{refreshText}</Typography>
</RefreshTextContainer>
);
};
}
interface RefreshTextProps {
onLastRefreshHandler: () => string;

16
frontend/src/container/Header/DateTimeSelection/index.tsx
View File

@ -1,14 +1,10 @@
import { Button, Select as DefaultSelect } from 'antd';
import React, { useCallback, useEffect, useState } from 'react';
import { getDefaultOption, getOptions, Time } from './config';
import { Container, Form, FormItem } from './styles';
const { Option } = DefaultSelect;
import getLocalStorageKey from 'api/browser/localstorage/get';
import setLocalStorageKey from 'api/browser/localstorage/set';
import { LOCAL_STORAGE } from 'constants/localStorage';
import dayjs, { Dayjs } from 'dayjs';
import getTimeString from 'lib/getTimeString';
import React, { useCallback, useEffect, useState } from 'react';
import { connect, useSelector } from 'react-redux';
import { RouteComponentProps, withRouter } from 'react-router';
import { bindActionCreators, Dispatch } from 'redux';
@ -19,13 +15,17 @@ import AppActions from 'types/actions';
import { GlobalReducer } from 'types/reducer/globalTime';
import CustomDateTimeModal, { DateTimeRangeType } from '../CustomDateTimeModal';
import { getDefaultOption, getOptions, Time } from './config';
import RefreshText from './Refresh';
import { Container, Form, FormItem } from './styles';
const DateTimeSelection = ({
const { Option } = DefaultSelect;
function DateTimeSelection({
location,
updateTimeInterval,
globalTimeLoading,
}: Props): JSX.Element => {
}: Props): JSX.Element {
const [form_dtselector] = Form.useForm();
const params = new URLSearchParams(location.search);
@ -290,7 +290,7 @@ const DateTimeSelection = ({
/>
</Container>
);
};
}
interface DispatchProps {
updateTimeInterval: (

4
frontend/src/container/Header/index.tsx
View File

@ -15,7 +15,7 @@ const routesToSkip = [
ROUTES.ALL_CHANNELS,
];
const TopNav = (): JSX.Element | null => {
function TopNav(): JSX.Element | null {
const { pathname } = useLocation();
if (history.location.pathname === ROUTES.SIGN_UP) {
@ -46,6 +46,6 @@ const TopNav = (): JSX.Element | null => {
)}
</Container>
);
};
}
export default TopNav;

8
frontend/src/container/ListAlertRules/DeleteAlert.tsx
View File

@ -6,11 +6,11 @@ import React, { useState } from 'react';
import { PayloadProps as DeleteAlertPayloadProps } from 'types/api/alerts/delete';
import { Alerts } from 'types/api/alerts/getAll';
const DeleteAlert = ({
function DeleteAlert({
id,
setData,
notifications,
}: DeleteAlertProps): JSX.Element => {
}: DeleteAlertProps): JSX.Element {
const [deleteAlertState, setDeleteAlertState] = useState<
State<DeleteAlertPayloadProps>
>({
@ -70,7 +70,6 @@ const DeleteAlert = ({
};
return (
<>
<Button
disabled={deleteAlertState.loading || false}
loading={deleteAlertState.loading || false}
@ -79,9 +78,8 @@ const DeleteAlert = ({
>
Delete
</Button>
</>
);
};
}
interface DeleteAlertProps {
id: Alerts['id'];

6
frontend/src/container/ListAlertRules/ListAlert.tsx
View File

@ -15,7 +15,7 @@ import DeleteAlert from './DeleteAlert';
import { Button, ButtonContainer } from './styles';
import Status from './TableComponents/Status';
const ListAlert = ({ allAlertRules }: ListAlertProps): JSX.Element => {
function ListAlert({ allAlertRules }: ListAlertProps): JSX.Element {
const [data, setData] = useState<Alerts[]>(allAlertRules || []);
useInterval(() => {
@ -62,7 +62,7 @@ const ListAlert = ({ allAlertRules }: ListAlertProps): JSX.Element => {
dataIndex: 'labels',
key: 'severity',
sorter: (a, b): number =>
a.labels['severity'].length - b.labels['severity'].length,
a.labels.severity.length - b.labels.severity.length,
render: (value): JSX.Element => {
const objectKeys = Object.keys(value);
const withSeverityKey = objectKeys.find((e) => e === 'severity') || '';
@ -144,7 +144,7 @@ const ListAlert = ({ allAlertRules }: ListAlertProps): JSX.Element => {
<Table rowKey="id" columns={columns} dataSource={data} />
</>
);
};
}
interface ListAlertProps {
allAlertRules: Alerts[];

4
frontend/src/container/ListAlertRules/TableComponents/Status.tsx
View File

@ -2,7 +2,7 @@ import { Tag } from 'antd';
import React from 'react';
import { Alerts } from 'types/api/alerts/getAll';
const Status = ({ status }: StatusProps): JSX.Element => {
function Status({ status }: StatusProps): JSX.Element {
switch (status) {
case 'inactive': {
return <Tag color="green">OK</Tag>;
@ -20,7 +20,7 @@ const Status = ({ status }: StatusProps): JSX.Element => {
return <Tag color="default">Unknown Status</Tag>;
}
}
};
}
interface StatusProps {
status: Alerts['state'];

4
frontend/src/container/ListAlertRules/index.tsx
View File

@ -6,7 +6,7 @@ import { PayloadProps } from 'types/api/alerts/getAll';
import ListAlert from './ListAlert';
const ListAlertRules = (): JSX.Element => {
function ListAlertRules(): JSX.Element {
const { loading, payload, error, errorMessage } = useFetch<
PayloadProps,
undefined
@ -27,6 +27,6 @@ const ListAlertRules = (): JSX.Element => {
}}
/>
);
};
}
export default ListAlertRules;

4
frontend/src/container/ListOfDashboard/TableComponents/CreatedBy.tsx
View File

@ -5,7 +5,7 @@ import React from 'react';
import { Data } from '..';
const Created = (createdBy: Data['createdBy']): JSX.Element => {
function Created(createdBy: Data['createdBy']): JSX.Element {
const time = new Date(createdBy);
const date = getFormattedDate(time);
@ -13,6 +13,6 @@ const Created = (createdBy: Data['createdBy']): JSX.Element => {
const timeString = `${date} ${convertDateToAmAndPm(time)}`;
return <Typography>{`${timeString}`}</Typography>;
};
}
export default Created;

6
frontend/src/container/ListOfDashboard/TableComponents/Date.tsx
View File

@ -5,9 +5,7 @@ import React from 'react';
import { Data } from '..';
const DateComponent = (
lastUpdatedTime: Data['lastUpdatedTime'],
): JSX.Element => {
function DateComponent(lastUpdatedTime: Data['lastUpdatedTime']): JSX.Element {
const time = new Date(lastUpdatedTime);
const date = getFormattedDate(time);
@ -15,6 +13,6 @@ const DateComponent = (
const timeString = `${date} ${convertDateToAmAndPm(time)}`;
return <Typography>{timeString}</Typography>;
};
}
export default DateComponent;

14
frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.tsx
View File

@ -1,18 +1,14 @@
import { Button } from 'antd';
import React, { useCallback } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Dispatch } from 'redux';
import { bindActionCreators, Dispatch } from 'redux';
import { ThunkDispatch } from 'redux-thunk';
import { DeleteDashboard, DeleteDashboardProps } from 'store/actions';
import AppActions from 'types/actions';
import { Data } from '../index';
const DeleteButton = ({
deleteDashboard,
id,
}: DeleteButtonProps): JSX.Element => {
function DeleteButton({ deleteDashboard, id }: DeleteButtonProps): JSX.Element {
const onClickHandler = useCallback(() => {
deleteDashboard({
uuid: id,
@ -24,7 +20,7 @@ const DeleteButton = ({
Delete
</Button>
);
};
}
interface DispatchProps {
deleteDashboard: ({
@ -43,7 +39,7 @@ type DeleteButtonProps = Data & DispatchProps;
const WrapperDeleteButton = connect(null, mapDispatchToProps)(DeleteButton);
// This is to avoid the type collision
const Wrapper = (props: Data): JSX.Element => {
function Wrapper(props: Data): JSX.Element {
return (
<WrapperDeleteButton
{...{
@ -51,6 +47,6 @@ const Wrapper = (props: Data): JSX.Element => {
}}
/>
);
};
}
export default Wrapper;

4
frontend/src/container/ListOfDashboard/TableComponents/Name.tsx
View File

@ -6,7 +6,7 @@ import { generatePath } from 'react-router-dom';
import { Data } from '..';
const Name = (name: Data['name'], data: Data): JSX.Element => {
function Name(name: Data['name'], data: Data): JSX.Element {
const onClickHandler = () => {
history.push(
generatePath(ROUTES.DASHBOARD, {
@ -20,6 +20,6 @@ const Name = (name: Data['name'], data: Data): JSX.Element => {
{name}
</Button>
);
};
}
export default Name;

4
frontend/src/container/ListOfDashboard/TableComponents/Tags.tsx
View File

@ -3,7 +3,7 @@ import React from 'react';
import { Data } from '../index';
const Tags = (props: Data['tags']): JSX.Element => {
function Tags(props: Data['tags']): JSX.Element {
return (
<>
{props.map((e) => (
@ -11,6 +11,6 @@ const Tags = (props: Data['tags']): JSX.Element => {
))}
</>
);
};
}
export default Tags;

4
frontend/src/container/ListOfDashboard/index.tsx
View File

@ -18,7 +18,7 @@ import DeleteButton from './TableComponents/DeleteButton';
import Name from './TableComponents/Name';
import Tags from './TableComponents/Tags';
const ListOfAllDashboard = (): JSX.Element => {
function ListOfAllDashboard(): JSX.Element {
const { dashboards } = useSelector<AppState, DashboardReducer>(
(state) => state.dashboards,
);
@ -179,7 +179,7 @@ const ListOfAllDashboard = (): JSX.Element => {
/>
</TableContainer>
);
};
}
export interface Data {
key: React.Key;

14
frontend/src/container/MetricsApplication/Tabs/Application.tsx
View File

@ -17,7 +17,7 @@ import { Card, Col, GraphContainer, GraphTitle, Row } from '../styles';
import TopEndpointsTable from '../TopEndpointsTable';
import { Button } from './styles';
const Application = ({ getWidget }: DashboardProps): JSX.Element => {
function Application({ getWidget }: DashboardProps): JSX.Element {
const { servicename } = useParams<{ servicename?: string }>();
const selectedTimeStamp = useRef(0);
@ -34,7 +34,8 @@ const Application = ({ getWidget }: DashboardProps): JSX.Element => {
urlParams.set(METRICS_PAGE_QUERY_PARAM.endTime, tPlusOne.toString());
history.replace(
`${ROUTES.TRACE
`${
ROUTES.TRACE
}?${urlParams.toString()}&selected={"serviceName":["${servicename}"],"status":["ok","error"]}&filterToFetchData=["duration","status","serviceName"]&userSelectedFilter={"status":["error","ok"],"serviceName":["${servicename}"]}&isSelectedFilterSkipped=true`,
);
};
@ -70,12 +71,10 @@ const Application = ({ getWidget }: DashboardProps): JSX.Element => {
selectedTimeStamp.current = time.getTime();
}
}
} else {
if (buttonElement && buttonElement.style.display === 'block') {
} else if (buttonElement && buttonElement.style.display === 'block') {
buttonElement.style.display = 'none';
}
}
}
};
const onErrorTrackHandler = (timestamp: number): void => {
@ -87,7 +86,8 @@ const Application = ({ getWidget }: DashboardProps): JSX.Element => {
urlParams.set(METRICS_PAGE_QUERY_PARAM.endTime, tPlusOne.toString());
history.replace(
`${ROUTES.TRACE
`${
ROUTES.TRACE
}?${urlParams.toString()}&selected={"serviceName":["${servicename}"],"status":["error"]}&filterToFetchData=["duration","status","serviceName"]&userSelectedFilter={"status":["error"],"serviceName":["${servicename}"]}&isSelectedFilterSkipped=true`,
);
};
@ -239,7 +239,7 @@ const Application = ({ getWidget }: DashboardProps): JSX.Element => {
</Row>
</>
);
};
}
interface DashboardProps {
getWidget: (query: Widgets['query']) => Widgets;

6
frontend/src/container/MetricsApplication/Tabs/DBCall.tsx
View File

@ -6,11 +6,10 @@ import { Widgets } from 'types/api/dashboard/getAll';
import { Card, GraphContainer, GraphTitle, Row } from '../styles';
const DBCall = ({ getWidget }: DBCallProps): JSX.Element => {
function DBCall({ getWidget }: DBCallProps): JSX.Element {
const { servicename } = useParams<{ servicename?: string }>();
return (
<>
<Row gutter={24}>
<Col span={12}>
<Card>
@ -52,9 +51,8 @@ const DBCall = ({ getWidget }: DBCallProps): JSX.Element => {
</Card>
</Col>
</Row>
</>
);
};
}
interface DBCallProps {
getWidget: (query: Widgets['query']) => Widgets;

4
frontend/src/container/MetricsApplication/Tabs/External.tsx
View File

@ -6,7 +6,7 @@ import { Widgets } from 'types/api/dashboard/getAll';
import { Card, GraphContainer, GraphTitle, Row } from '../styles';
const External = ({ getWidget }: ExternalProps): JSX.Element => {
function External({ getWidget }: ExternalProps): JSX.Element {
const { servicename } = useParams<{ servicename?: string }>();
return (
@ -96,7 +96,7 @@ const External = ({ getWidget }: ExternalProps): JSX.Element => {
</Row>
</>
);
};
}
interface ExternalProps {
getWidget: (query: Widgets['query']) => Widgets;

4
frontend/src/container/MetricsApplication/TopEndpointsTable.tsx
View File

@ -9,7 +9,7 @@ import { topEndpointListItem } from 'store/actions/MetricsActions';
import { AppState } from 'store/reducers';
import { GlobalReducer } from 'types/reducer/globalTime';
const TopEndpointsTable = (props: TopEndpointsTableProps): JSX.Element => {
function TopEndpointsTable(props: TopEndpointsTableProps): JSX.Element {
const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
(state) => state.globalTime,
);
@ -97,7 +97,7 @@ const TopEndpointsTable = (props: TopEndpointsTableProps): JSX.Element => {
rowKey="name"
/>
);
};
}
type DataProps = topEndpointListItem;

6
frontend/src/container/MetricsApplication/index.tsx
View File

@ -8,7 +8,7 @@ import External from './Tabs/External';
const { TabPane } = Tabs;
const ServiceMetrics = (): JSX.Element => {
function ServiceMetrics(): JSX.Element {
const getWidget = (query: Widgets['query']): Widgets => {
return {
description: '',
@ -17,7 +17,7 @@ const ServiceMetrics = (): JSX.Element => {
nullZeroValues: '',
opacity: '0',
panelTypes: 'TIME_SERIES',
query: query,
query,
queryData: {
data: [],
error: false,
@ -45,6 +45,6 @@ const ServiceMetrics = (): JSX.Element => {
</TabPane>
</Tabs>
);
};
}
export default ServiceMetrics;

14
frontend/src/container/MetricsTable/SkipOnBoardModal/index.tsx
View File

@ -2,11 +2,11 @@ import { Button, Typography } from 'antd';
import Modal from 'components/Modal';
import React from 'react';
const SkipOnBoardingModal = ({ onContinueClick }: Props): JSX.Element => {
function SkipOnBoardingModal({ onContinueClick }: Props): JSX.Element {
return (
<Modal
title={'Setup instrumentation'}
isModalVisible={true}
title="Setup instrumentation"
isModalVisible
closable={false}
footer={[
<Button key="submit" type="primary" onClick={onContinueClick}>
@ -22,14 +22,14 @@ const SkipOnBoardingModal = ({ onContinueClick }: Props): JSX.Element => {
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
/>
<div>
<Typography>No instrumentation data.</Typography>
<Typography>
Please instrument your application as mentioned&nbsp;
<a
href={'https://signoz.io/docs/instrumentation/overview'}
target={'_blank'}
href="https://signoz.io/docs/instrumentation/overview"
target="_blank"
rel="noreferrer"
>
here
@ -39,7 +39,7 @@ const SkipOnBoardingModal = ({ onContinueClick }: Props): JSX.Element => {
</>
</Modal>
);
};
}
interface Props {
onContinueClick: () => void;

6
frontend/src/container/MetricsTable/index.tsx
View File

@ -12,7 +12,7 @@ import MetricReducer from 'types/reducer/metrics';
import SkipBoardModal from './SkipOnBoardModal';
import { Container, Name } from './styles';
const Metrics = (): JSX.Element => {
function Metrics(): JSX.Element {
const [skipOnboarding, setSkipOnboarding] = useState(
localStorageGet(SKIP_ONBOARDING) === 'true',
);
@ -46,7 +46,7 @@ const Metrics = (): JSX.Element => {
key: 'serviceName',
// eslint-disable-next-line react/display-name
render: (text: string): JSX.Element => (
<div onClick={(): void => onClickHandler(ROUTES.APPLICATION + '/' + text)}>
<div onClick={(): void => onClickHandler(`${ROUTES.APPLICATION}/${text}`)}>
<Name>{text}</Name>
</div>
),
@ -85,7 +85,7 @@ const Metrics = (): JSX.Element => {
/>
</Container>
);
};
}
type DataProps = servicesListItem;

4
frontend/src/container/NewDashboard/ComponentsSlider/index.tsx
View File

@ -10,7 +10,7 @@ import { v4 } from 'uuid';
import menuItems, { ITEMS } from './menuItems';
import { Card, Container, Text } from './styles';
const DashboardGraphSlider = (): JSX.Element => {
function DashboardGraphSlider(): JSX.Element {
const { dashboards } = useSelector<AppState, DashboardReducer>(
(state) => state.dashboards,
);
@ -81,7 +81,7 @@ const DashboardGraphSlider = (): JSX.Element => {
))}
</Container>
);
};
}
export type GRAPH_TYPES = ITEMS;

5
frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts
View File

@ -1,5 +1,6 @@
import TimeSeries from 'assets/Dashboard/TimeSeries';
import { TimeSeriesProps as IconProps } from 'assets/Dashboard/TimeSeries';
import TimeSeries, {
TimeSeriesProps as IconProps,
} from 'assets/Dashboard/TimeSeries';
import ValueIcon from 'assets/Dashboard/Value';
const Items: ItemsProps[] = [

4
frontend/src/container/NewDashboard/DescriptionOfDashboard/AddTags/index.tsx
View File

@ -5,7 +5,7 @@ import React, { useState } from 'react';
import { InputContainer, NewTagContainer, TagsContainer } from './styles';
const AddTags = ({ tags, setTags }: AddTagsProps): JSX.Element => {
function AddTags({ tags, setTags }: AddTagsProps): JSX.Element {
const [inputValue, setInputValue] = useState<string>('');
const [inputVisible, setInputVisible] = useState<boolean>(false);
const [editInputIndex, setEditInputIndex] = useState(-1);
@ -110,7 +110,7 @@ const AddTags = ({ tags, setTags }: AddTagsProps): JSX.Element => {
)}
</TagsContainer>
);
};
}
interface AddTagsProps {
tags: string[];

11
frontend/src/container/NewDashboard/DescriptionOfDashboard/Description/index.tsx
View File

@ -2,12 +2,13 @@ import { Input } from 'antd';
import React, { useCallback } from 'react';
import { Container } from './styles';
const { TextArea } = Input;
const Description = ({
function Description({
description,
setDescription,
}: DescriptionProps): JSX.Element => {
}: DescriptionProps): JSX.Element {
const onChangeHandler = useCallback(
(e: React.ChangeEvent<HTMLTextAreaElement>) => {
setDescription(e.target.value);
@ -18,13 +19,13 @@ const Description = ({
return (
<Container>
<TextArea
placeholder={'Description of the dashboard'}
placeholder="Description of the dashboard"
onChange={onChangeHandler}
value={description}
></TextArea>
/>
</Container>
);
};
}
interface DescriptionProps {
description: string;

6
frontend/src/container/NewDashboard/DescriptionOfDashboard/NameOfTheDashboard/index.tsx
View File

@ -1,10 +1,10 @@
import Input from 'components/Input';
import React, { useCallback } from 'react';
const NameOfTheDashboard = ({
function NameOfTheDashboard({
setName,
name,
}: NameOfTheDashboardProps): JSX.Element => {
}: NameOfTheDashboardProps): JSX.Element {
const onChangeHandler = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
setName(e.target.value);
@ -20,7 +20,7 @@ const NameOfTheDashboard = ({
onChangeHandler={onChangeHandler}
/>
);
};
}
interface NameOfTheDashboardProps {
name: string;

16
frontend/src/container/NewDashboard/DescriptionOfDashboard/index.tsx
View File

@ -18,19 +18,19 @@ import DashboardReducer from 'types/reducer/dashboards';
import Description from './Description';
import { Button, Container } from './styles';
const DescriptionOfDashboard = ({
function DescriptionOfDashboard({
updateDashboardTitleDescriptionTags,
toggleEditMode,
}: DescriptionOfDashboardProps): JSX.Element => {
}: DescriptionOfDashboardProps): JSX.Element {
const { dashboards, isEditMode } = useSelector<AppState, DashboardReducer>(
(state) => state.dashboards,
);
const [selectedDashboard] = dashboards;
const selectedData = selectedDashboard.data;
const title = selectedData.title;
const tags = selectedData.tags;
const description = selectedData.description;
const { title } = selectedData;
const { tags } = selectedData;
const { description } = selectedData;
const [updatedTitle, setUpdatedTitle] = useState<string>(title);
const [updatedTags, setUpdatedTags] = useState<string[]>(tags || []);
@ -67,11 +67,9 @@ const DescriptionOfDashboard = ({
]);
return (
<>
<Card>
<Row align="top" justify="space-between">
{!isEditMode ? (
<>
<Col>
<Typography>{title}</Typography>
<Container>
@ -83,7 +81,6 @@ const DescriptionOfDashboard = ({
<Typography>{description}</Typography>
</Container>
</Col>
</>
) : (
<Col lg={8}>
<NameOfTheDashboard name={updatedTitle} setName={setUpdatedTitle} />
@ -104,9 +101,8 @@ const DescriptionOfDashboard = ({
</Col>
</Row>
</Card>
</>
);
};
}
interface DispatchProps {
updateDashboardTitleDescriptionTags: (

6
frontend/src/container/NewDashboard/GridGraphs/index.tsx
View File

@ -7,20 +7,18 @@ import DashboardReducer from 'types/reducer/dashboards';
import { GridComponentSliderContainer } from './styles';
const GridGraphs = (): JSX.Element => {
function GridGraphs(): JSX.Element {
const { isAddWidget } = useSelector<AppState, DashboardReducer>(
(state) => state.dashboards,
);
return (
<>
<GridComponentSliderContainer>
{isAddWidget && <ComponentsSlider />}
<GridGraphLayout />
</GridComponentSliderContainer>
</>
);
};
}
export default GridGraphs;

4
frontend/src/container/NewDashboard/index.tsx
View File

@ -3,13 +3,13 @@ import React from 'react';
import Description from './DescriptionOfDashboard';
import GridGraphs from './GridGraphs';
const NewDashboard = (): JSX.Element => {
function NewDashboard(): JSX.Element {
return (
<>
<Description />
<GridGraphs />
</>
);
};
}
export default NewDashboard;

12
frontend/src/container/NewWidget/LeftContainer/QuerySection/Query.tsx
View File

@ -22,13 +22,13 @@ import {
QueryWrapper,
} from './styles';
const Query = ({
function Query({
currentIndex,
preLegend,
preQuery,
updateQuery,
deleteQuery,
}: QueryProps): JSX.Element => {
}: QueryProps): JSX.Element {
const [promqlQuery, setPromqlQuery] = useState(preQuery);
const [legendFormat, setLegendFormat] = useState(preLegend);
const { search } = useLocation();
@ -54,7 +54,7 @@ const Query = ({
const onDeleteQueryHandler = (): void => {
deleteQuery({
widgetId: widgetId,
widgetId,
currentIndex,
});
};
@ -70,7 +70,7 @@ const Query = ({
}
size="middle"
value={promqlQuery}
addonBefore={'PromQL Query'}
addonBefore="PromQL Query"
onBlur={(): void => onBlurHandler()}
/>
</InputContainer>
@ -82,7 +82,7 @@ const Query = ({
}
size="middle"
value={legendFormat}
addonBefore={'Legend Format'}
addonBefore="Legend Format"
onBlur={(): void => onBlurHandler()}
/>
</InputContainer>
@ -102,7 +102,7 @@ const Query = ({
<Divider />
</>
);
};
}
interface DispatchProps {
updateQuery: (

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

@ -14,16 +14,13 @@ import DashboardReducer from 'types/reducer/dashboards';
import Query from './Query';
import { QueryButton } from './styles';
const QuerySection = ({
selectedTime,
createQuery,
}: QueryProps): JSX.Element => {
function QuerySection({ selectedTime, createQuery }: QueryProps): JSX.Element {
const { dashboards } = useSelector<AppState, DashboardReducer>(
(state) => state.dashboards,
);
const [selectedDashboards] = dashboards;
const { search } = useLocation();
const widgets = selectedDashboards.data.widgets;
const { widgets } = selectedDashboards.data;
const urlQuery = useMemo(() => {
return new URLSearchParams(search);
@ -63,7 +60,7 @@ const QuerySection = ({
</QueryButton>
</>
);
};
}
interface DispatchProps {
createQuery: ({

7
frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraph.tsx
View File

@ -10,7 +10,10 @@ import DashboardReducer from 'types/reducer/dashboards';
import { NotFoundContainer } from './styles';
const WidgetGraph = ({ selectedGraph,yAxisUnit }: WidgetGraphProps): JSX.Element => {
function WidgetGraph({
selectedGraph,
yAxisUnit,
}: WidgetGraphProps): JSX.Element {
const { dashboards } = useSelector<AppState, DashboardReducer>(
(state) => state.dashboards,
);
@ -54,7 +57,7 @@ const WidgetGraph = ({ selectedGraph,yAxisUnit }: WidgetGraphProps): JSX.Element
yAxisUnit={yAxisUnit}
/>
);
};
}
type WidgetGraphProps = NewWidgetProps;

11
frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx
View File

@ -11,7 +11,10 @@ import { NewWidgetProps } from '../../index';
import { AlertIconContainer, Container, NotFoundContainer } from './styles';
import WidgetGraphComponent from './WidgetGraph';
const WidgetGraph = ({ selectedGraph, yAxisUnit }: WidgetGraphProps): JSX.Element => {
function WidgetGraph({
selectedGraph,
yAxisUnit,
}: WidgetGraphProps): JSX.Element {
const { dashboards, isQueryFired } = useSelector<AppState, DashboardReducer>(
(state) => state.dashboards,
);
@ -47,10 +50,12 @@ const WidgetGraph = ({ selectedGraph, yAxisUnit }: WidgetGraphProps): JSX.Elemen
</NotFoundContainer>
)}
{isQueryFired && <WidgetGraphComponent selectedGraph={selectedGraph} yAxisUnit={yAxisUnit} />}
{isQueryFired && (
<WidgetGraphComponent selectedGraph={selectedGraph} yAxisUnit={yAxisUnit} />
)}
</Container>
);
};
}
type WidgetGraphProps = NewWidgetProps;

6
frontend/src/container/NewWidget/LeftContainer/index.tsx
View File

@ -6,11 +6,11 @@ import QuerySection from './QuerySection';
import { QueryContainer } from './styles';
import WidgetGraph from './WidgetGraph';
const LeftContainer = ({
function LeftContainer({
selectedGraph,
selectedTime,
yAxisUnit,
}: LeftContainerProps): JSX.Element => {
}: LeftContainerProps): JSX.Element {
return (
<>
<WidgetGraph selectedGraph={selectedGraph} yAxisUnit={yAxisUnit} />
@ -20,7 +20,7 @@ const LeftContainer = ({
</QueryContainer>
</>
);
};
}
interface LeftContainerProps extends NewWidgetProps {
selectedTime: timePreferance;

4
frontend/src/container/NewWidget/RightContainer/YAxisUnitSelector.tsx
View File

@ -9,7 +9,7 @@ const findCategoryById = (searchValue) =>
const findCategoryByName = (searchValue) =>
find(flattenedCategories, (option) => option.name == searchValue);
const YAxisUnitSelector = ({ defaultValue, onSelect }): JSX.Element => {
function YAxisUnitSelector({ defaultValue, onSelect }): JSX.Element {
const onSelectHandler = (selectedValue: string): void => {
onSelect(findCategoryByName(selectedValue)?.id);
};
@ -34,6 +34,6 @@ const YAxisUnitSelector = ({ defaultValue, onSelect }): JSX.Element => {
</AutoComplete>
</Col>
);
};
}
export default YAxisUnitSelector;

1
frontend/src/container/NewWidget/RightContainer/dataFormatCategories.ts
View File

@ -382,7 +382,6 @@ export const dataTypeCategories = [
},
];
export const flattenedCategories = flattenDeep(
dataTypeCategories.map((category) => {
return category.formats;

23
frontend/src/container/NewWidget/RightContainer/index.tsx
View File

@ -6,25 +6,24 @@ import {
// Typography,
} from 'antd';
import InputComponent from 'components/Input';
import TimePreference from 'components/TimePreferenceDropDown';
import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
import GraphTypes from 'container/NewDashboard/ComponentsSlider/menuItems';
import React, { useCallback } from 'react';
import { dataTypeCategories } from './dataFormatCategories';
// import {ca} from '@grafana/data'
import { timePreferance } from './timeItems';
import YAxisUnitSelector from './YAxisUnitSelector';
const { TextArea } = Input;
import TimePreference from 'components/TimePreferenceDropDown';
import {
Container,
// NullButtonContainer, TextContainer,
Title,
} from './styles';
// import {ca} from '@grafana/data'
import { timePreferance } from './timeItems';
import YAxisUnitSelector from './YAxisUnitSelector';
const RightContainer = ({
const { TextArea } = Input;
function RightContainer({
description,
// opacity,
// selectedNullZeroValue,
@ -40,7 +39,7 @@ const RightContainer = ({
selectedTime,
yAxisUnit,
setYAxisUnit,
}: RightContainerProps): JSX.Element => {
}: RightContainerProps): JSX.Element {
const onChangeHandler = useCallback(
(setFunc: React.Dispatch<React.SetStateAction<string>>, value: string) => {
setFunc(value);
@ -89,7 +88,7 @@ const RightContainer = ({
value={title}
/>
<Title light={'true'}>Description</Title>
<Title light="true">Description</Title>
<TextArea
placeholder="Write something describing the panel"
@ -141,7 +140,7 @@ const RightContainer = ({
))}
</NullButtonContainer> */}
<Title light={'true'}>Panel Time Preference</Title>
<Title light="true">Panel Time Preference</Title>
<TimePreference
{...{
@ -152,7 +151,7 @@ const RightContainer = ({
<YAxisUnitSelector defaultValue={yAxisUnit} onSelect={setYAxisUnit} />
</Container>
);
};
}
interface RightContainerProps {
title: string;

10
frontend/src/container/NewWidget/index.tsx
View File

@ -38,13 +38,13 @@ import {
RightContainerWrapper,
} from './styles';
const NewWidget = ({
function NewWidget({
selectedGraph,
applySettingsToPanel,
saveSettingOfPanel,
getQueryResults,
updateQuery,
}: Props): JSX.Element => {
}: Props): JSX.Element {
const { dashboards } = useSelector<AppState, DashboardReducer>(
(state) => state.dashboards,
);
@ -55,7 +55,7 @@ const NewWidget = ({
const [selectedDashboard] = dashboards;
const widgets = selectedDashboard.data.widgets;
const { widgets } = selectedDashboard.data;
const { push } = useHistory();
const { search } = useLocation();
@ -114,7 +114,7 @@ const NewWidget = ({
title,
yAxisUnit,
widgetId: query.get('widgetId') || '',
dashboardId: dashboardId,
dashboardId,
});
}, [
opacity,
@ -221,7 +221,7 @@ const NewWidget = ({
</PanelContainer>
</Container>
);
};
}
export interface NewWidgetProps {
selectedGraph: GRAPH_TYPES;

4
frontend/src/container/SideNav/Slack.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
const Slack = (): JSX.Element => {
function Slack(): JSX.Element {
return (
<svg
width="28"
@ -43,6 +43,6 @@ const Slack = (): JSX.Element => {
/>
</svg>
);
};
}
export default Slack;

21
frontend/src/container/SideNav/index.tsx
View File

@ -4,8 +4,7 @@ import history from 'lib/history';
import setTheme from 'lib/theme/setTheme';
import React, { useCallback, useState } from 'react';
import { connect, useSelector } from 'react-redux';
import { NavLink } from 'react-router-dom';
import { useLocation } from 'react-router-dom';
import { NavLink, useLocation } from 'react-router-dom';
import { bindActionCreators } from 'redux';
import { ThunkDispatch } from 'redux-thunk';
import { ToggleDarkMode } from 'store/actions';
@ -15,10 +14,16 @@ import AppReducer from 'types/reducer/app';
import menus from './menuItems';
import Slack from './Slack';
import { SlackButton, SlackMenuItemContainer, ToggleButton } from './styles';
import { Logo, Sider, ThemeSwitcherWrapper } from './styles';
import {
Logo,
Sider,
SlackButton,
SlackMenuItemContainer,
ThemeSwitcherWrapper,
ToggleButton,
} from './styles';
const SideNav = ({ toggleDarkMode }: Props): JSX.Element => {
function SideNav({ toggleDarkMode }: Props): JSX.Element {
const [collapsed, setCollapsed] = useState<boolean>(false);
const { pathname } = useLocation();
const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
@ -28,7 +33,7 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => {
setTheme(preMode);
const id: appMode = preMode;
const head = document.head;
const { head } = document;
const link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
@ -71,7 +76,7 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => {
/>
</ThemeSwitcherWrapper>
<NavLink to={ROUTES.APPLICATION}>
<Logo src={'/signoz.svg'} alt="SigNoz" collapsed={collapsed} />
<Logo src="/signoz.svg" alt="SigNoz" collapsed={collapsed} />
</NavLink>
<Menu
@ -97,7 +102,7 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => {
</Menu>
</Sider>
);
};
}
type appMode = 'darkMode' | 'lightMode';

1
frontend/src/container/SideNav/styles.ts
View File

@ -1,5 +1,6 @@
import { Layout, Menu, Switch, Typography } from 'antd';
import styled, { css } from 'styled-components';
const { Sider: SiderComponent } = Layout;
export const ThemeSwitcherWrapper = styled.div`

8
frontend/src/container/Timeline/index.tsx
View File

@ -11,11 +11,11 @@ import { getIntervals, getIntervalSpread } from './utils';
const Timeline_Height = 22;
const Timeline_H_Spacing = 0;
const Timeline = ({
function Timeline({
traceMetaData,
globalTraceMetadata,
setIntervalUnit,
}: TimelineProps): JSX.Element => {
}: TimelineProps): JSX.Element {
const [ref, { width }] = useMeasure<HTMLDivElement>();
const { isDarkMode } = useThemeMode();
@ -27,7 +27,7 @@ const Timeline = ({
baseSpread,
intervalSpreadNormalized,
} = getIntervalSpread({
globalTraceMetadata: globalTraceMetadata,
globalTraceMetadata,
localTraceMetaData: traceMetaData,
});
@ -90,7 +90,7 @@ const Timeline = ({
</Svg>
</StyledDiv>
);
};
}
interface TimelineProps {
traceMetaData: {

5
frontend/src/container/Timeline/utils.ts
View File

@ -32,9 +32,8 @@ export const getIntervalSpread = ({
const intervalSpreadNormalized =
intervalSpread < 1.0
? intervalSpread
: Math.floor(
Number(integerPartString) / Math.pow(10, integerPartLength - 1),
) * Math.pow(10, integerPartLength - 1);
: Math.floor(Number(integerPartString) / 10 ** (integerPartLength - 1)) *
10 ** (integerPartLength - 1);
return {
baseInterval,
baseSpread,

4
frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx
View File

@ -15,7 +15,7 @@ import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';
import { CheckBoxContainer } from './styles';
const CheckBoxComponent = (props: CheckBoxProps): JSX.Element => {
function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
const {
selectedFilter,
filterLoading,
@ -167,7 +167,7 @@ const CheckBoxComponent = (props: CheckBoxProps): JSX.Element => {
)}
</CheckBoxContainer>
);
};
}
interface DispatchProps {
selectedTraceFilter: (props: {

4
frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx
View File

@ -5,7 +5,7 @@ import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';
import CheckBoxComponent from '../Common/Checkbox';
const CommonCheckBox = (props: CommonCheckBoxProps): JSX.Element => {
function CommonCheckBox(props: CommonCheckBoxProps): JSX.Element {
const { filter } = useSelector<AppState, TraceReducer>(
(state) => state.traces,
);
@ -28,7 +28,7 @@ const CommonCheckBox = (props: CommonCheckBoxProps): JSX.Element => {
))}
</>
);
};
}
interface CommonCheckBoxProps {
name: TraceFilterEnum;

16
frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx
View File

@ -26,7 +26,7 @@ const getMs = (value: string) => {
.format('SSS');
};
const Duration = (): JSX.Element => {
function Duration(): JSX.Element {
const {
filter,
selectedFilter,
@ -57,8 +57,8 @@ const Duration = (): JSX.Element => {
const duration = getDuration();
const maxDuration = duration['maxDuration'] || '0';
const minDuration = duration['minDuration'] || '0';
const maxDuration = duration.maxDuration || '0';
const minDuration = duration.minDuration || '0';
const [localMax, setLocalMax] = useState<string>(maxDuration);
const [localMin, setLocalMin] = useState<string>(minDuration);
@ -134,7 +134,7 @@ const Duration = (): JSX.Element => {
const onChangeMaxHandler: React.ChangeEventHandler<HTMLInputElement> = (
event,
) => {
const value = event.target.value;
const { value } = event.target;
const min = parseFloat(localMin);
const max = parseFloat(value) * 1000000;
@ -147,7 +147,7 @@ const Duration = (): JSX.Element => {
const onChangeMinHandler: React.ChangeEventHandler<HTMLInputElement> = (
event,
) => {
const value = event.target.value;
const { value } = event.target;
const min = parseFloat(value) * 1000000;
const max = parseFloat(localMax);
onRangeSliderHandler([min, max]);
@ -184,8 +184,8 @@ const Duration = (): JSX.Element => {
<Container>
<Slider
defaultValue={[defaultValue[0], defaultValue[1]]}
min={parseFloat((filter.get('duration') || {})['minDuration'])}
max={parseFloat((filter.get('duration') || {})['maxDuration'])}
min={parseFloat((filter.get('duration') || {}).minDuration)}
max={parseFloat((filter.get('duration') || {}).maxDuration)}
range
tipFormatter={(value) => {
if (value === undefined) {
@ -207,6 +207,6 @@ const Duration = (): JSX.Element => {
</Container>
</div>
);
};
}
export default Duration;

4
frontend/src/container/Trace/Filters/Panel/PanelBody/index.tsx
View File

@ -8,7 +8,7 @@ import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';
import CommonCheckBox from './CommonCheckBox';
import Duration from './Duration';
const PanelBody = (props: PanelBodyProps): JSX.Element => {
function PanelBody(props: PanelBodyProps): JSX.Element {
const { type } = props;
const { filterLoading } = useSelector<AppState, TraceReducer>(
@ -28,7 +28,7 @@ const PanelBody = (props: PanelBodyProps): JSX.Element => {
{type === 'duration' ? <Duration /> : <CommonCheckBox name={type} />}
</Card>
);
};
}
interface PanelBodyProps {
type: TraceFilterEnum;

27
frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx
View File

@ -1,9 +1,20 @@
import { DownOutlined, RightOutlined } from '@ant-design/icons';
import { Card, Divider, notification, Typography } from 'antd';
import getFilters from 'api/trace/getFilters';
import { AxiosError } from 'axios';
import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Dispatch } from 'redux';
import { getFilter, updateURL } from 'store/actions/trace/util';
import { AppState } from 'store/reducers';
import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';
import AppActions from 'types/actions';
import { UPDATE_ALL_FILTERS } from 'types/actions/trace';
import { GlobalReducer } from 'types/reducer/globalTime';
import {
AllPanelHeading,
TraceFilterEnum,
TraceReducer,
} from 'types/reducer/trace';
import {
ButtonComponent,
@ -12,18 +23,10 @@ import {
IconContainer,
TextCotainer,
} from './styles';
const { Text } = Typography;
import getFilters from 'api/trace/getFilters';
import { AxiosError } from 'axios';
import { Dispatch } from 'redux';
import { getFilter, updateURL } from 'store/actions/trace/util';
import AppActions from 'types/actions';
import { UPDATE_ALL_FILTERS } from 'types/actions/trace';
import { GlobalReducer } from 'types/reducer/globalTime';
import { AllPanelHeading } from 'types/reducer/trace';
const PanelHeading = (props: PanelHeadingProps): JSX.Element => {
function PanelHeading(props: PanelHeadingProps): JSX.Element {
const {
filterLoading,
filterToFetchData,
@ -307,7 +310,7 @@ const PanelHeading = (props: PanelHeadingProps): JSX.Element => {
</Card>
</>
);
};
}
interface PanelHeadingProps {
name: TraceFilterEnum;

4
frontend/src/container/Trace/Filters/Panel/index.tsx
View File

@ -6,7 +6,7 @@ import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';
import PanelBody from './PanelBody';
import PanelHeading from './PanelHeading';
const Panel = (props: PanelProps): JSX.Element => {
function Panel(props: PanelProps): JSX.Element {
const traces = useSelector<AppState, TraceReducer>((state) => state.traces);
const isDefaultOpen =
@ -19,7 +19,7 @@ const Panel = (props: PanelProps): JSX.Element => {
{isDefaultOpen && <PanelBody type={props.name} />}
</>
);
};
}
interface PanelProps {
name: TraceFilterEnum;

8
frontend/src/container/Trace/Filters/index.tsx
View File

@ -16,12 +16,14 @@ export const AllTraceFilterEnum: TraceFilterEnum[] = [
'httpUrl',
];
const Filters = (): JSX.Element => (
<React.Fragment>
function Filters(): JSX.Element {
return (
<>
{AllTraceFilterEnum.map((panelName) => (
<Panel key={panelName} name={panelName} />
))}
</React.Fragment>
</>
);
}
export default Filters;

6
frontend/src/container/Trace/Graph/config.ts
View File

@ -56,7 +56,7 @@ export const getChartData = (
export const getChartDataforGroupBy = (
props: TraceReducer['spansGraph']['payload'],
): ChartData => {
const items = props.items;
const { items } = props;
const chartData: ChartData = {
datasets: [],
@ -68,7 +68,7 @@ export const getChartDataforGroupBy = (
const allGroupBy = Object.keys(items).map((e) => items[e].groupBy);
Object.keys(allGroupBy).map((e) => {
const length = Object.keys(allGroupBy[e]).length;
const { length } = Object.keys(allGroupBy[e]);
if (length >= max) {
max = length;
@ -90,7 +90,7 @@ export const getChartDataforGroupBy = (
chartData.labels?.push(date);
const groupBy = spanData.groupBy;
const { groupBy } = spanData;
const preData: number[] = [];
if (groupBy) {

Some files were not shown because too many files have changed in this diff Show More