, newValue: number) => {
66 | dispatch(Actions.SetResultsTabValue(newValue));
67 | };
68 |
69 | const receivedData = useAppSelector((state) => state.receivedData);
70 |
71 | //pushing tab data
72 | const tabsArr: JSX.Element[] = [];
73 | const tabPanelsArr: JSX.Element[] = [];
74 | for (let i = 0; i < receivedData.length; i++) {
75 | const singleTest = receivedData[i];
76 | // tabsArr.push(
91 |
92 |
99 |
100 |
101 | );
102 | }
103 | );
104 | tabPanelsArr.push(
105 |
106 |
108 |
109 |
111 |
112 |
113 | {routeNames}
114 |
115 | );
116 | }
117 | return (
118 |
119 | {receivedData.length !== 0 && (
120 |
121 |
130 | {tabsArr}
131 |
132 |
133 |
135 | )}
136 | {receivedData.length === 0 && (
137 |
138 |
140 | Oops! No results are available!
141 | {' '}
144 |
145 |
146 |
155 |
156 |
157 |
158 | )}
159 |
160 | );
161 | };
162 |
163 | export default VerticalTabs;
164 |
--------------------------------------------------------------------------------
/src/client/components/testConfigComponents/RangeSliders.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Row from 'react-bootstrap/Row';
3 | import Col from 'react-bootstrap/Col';
4 | import Container from 'react-bootstrap/Container';
5 |
6 | import SingleSlider from './SingleSlider';
7 |
8 | import { useAppSelector, useAppDispatch } from '../../state/hooks';
9 | import Actions from '../../state/actions/actions';
10 | import Typography from '@material-ui/core/Typography';
11 |
12 | import HighRPSWarning from './highrpswarning';
13 |
14 | const RangeSliders: () => JSX.Element = () => {
15 | const MAXRPS = 1000,
16 | MAXRPSEND = 20000,
17 | MAXSECONDS = 20;
18 | const valueRPS = useAppSelector((state) => state.valueRPS);
19 | const valueStart = useAppSelector((state) => state.valueStart);
20 | const valueEnd = useAppSelector((state) => state.valueEnd);
21 | const valueSeconds = useAppSelector((state) => state.valueSeconds);
22 | const isTestRunning = useAppSelector((state) => state.isTestRunning);
23 | const curTestTotalPercent = useAppSelector((state) => state.curTestTotalPercent);
24 | const curTestStartTime = useAppSelector((state) => state.curTestStartTime);
25 | const dispatch = useAppDispatch();
26 |
27 | const handleChangeRPS = (event: unknown, newValue: number | number[]) => {
28 | dispatch(Actions.SetValueRPS(newValue as number));
29 | dispatch(Actions.SetValueEnd(Math.min(MAXRPSEND, valueStart + 15 * valueRPS)));
30 | dispatch(Actions.SetCurRunningRPS(0));
31 | };
32 | const handleChangeSeconds = (event: unknown, newValue: number | number[]) => {
33 | dispatch(Actions.SetValueSeconds(newValue as number));
34 | };
35 | const handleChangeStartEnd = (event: unknown, newValue: number | number[]) => {
36 | dispatch(Actions.SetValueStart((newValue as number[])[0]));
37 | dispatch(Actions.SetValueEnd((newValue as number[])[1]));
38 | dispatch(Actions.SetCurRunningRPS(0));
39 | };
40 |
41 | const approximateTestTime = (valueSeconds * (valueEnd + valueRPS - valueStart)) / valueRPS;
42 | const curElapsedTime = (Date.now() - curTestStartTime) / 1000;
43 | const estimatedTime = Math.min(
44 | (curElapsedTime * (100 - curTestTotalPercent)) / curTestTotalPercent,
45 | approximateTestTime * 100
46 | );
47 |
48 | return (
49 |
50 |
51 |
52 |
96 |
97 |
98 |
99 |
102 | Estimated time remaining: {Math.round(estimatedTime)} seconds
103 |
104 | ) : (
105 |
106 | Approximate test time: {Math.round(approximateTestTime)} seconds
107 |
108 | )}
109 |
112 |
113 |
114 | );
115 | };
116 |
117 | export default RangeSliders;
118 |
--------------------------------------------------------------------------------
/src/client/components/testConfigComponents/SingleSlider.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Typography from '@material-ui/core/Typography';
3 | import Slider from '@material-ui/core/Slider';
4 |
5 | import Row from 'react-bootstrap/Row';
6 | import Col from 'react-bootstrap/Col';
7 |
8 | import { useAppSelector } from '../../state/hooks';
9 |
10 | const SingleSlider: (props: {
11 | text: string;
12 | id: string;
13 | key: string;
14 | value: number | number[];
15 | onChange: (event: unknown, newValue: number | number[]) => void;
16 | min: number;
17 | max: number;
18 | step: number;
19 | marks?: {
20 | interval: number;
21 | min: number;
22 | max: number;
23 | };
24 | disabled?: boolean;
25 | extraLabel?: string;
26 | extraLabelDanger?: string | undefined;
27 | }) => JSX.Element = (props) => {
28 | const darkMode = useAppSelector((state) => state.darkMode);
29 | // generates marks for the sliders
30 | const marks = (interval: number, min: number, max: number) => {
31 | const marksArr: {
32 | value: number;
33 | label: string;
34 | }[] = [];
35 |
36 | // making sure it doesnt push the same value, which will cause react same key error
37 | if (min !== interval) {
38 | marksArr.push({ value: min, label: min.toString() });
39 | }
40 | for (let i = interval; i <= max; i += interval) {
41 | marksArr.push({ value: i, label: i.toString() });
42 | }
43 | return marksArr;
44 | };
45 |
46 | function valuetext(value: number) {
47 | return `${value}`;
48 | }
49 |
50 | return (
51 | <>
52 |
53 | {props.text}
55 | {props.extraLabel}
56 |
57 |
79 |
80 | );
81 | };
82 |
83 | export default SingleSlider;
84 |
--------------------------------------------------------------------------------
/src/client/components/testConfigComponents/TargetInputs.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Container from 'react-bootstrap/Container';
3 |
4 | import TargetInputSingle, { TargetInputDisabled } from './TargetInputSingle';
5 |
6 | import { useAppSelector } from '../../state/hooks';
7 | //---------------------------- will render single targets based on the state passed down from the parent
8 | const TartgetInputs: () => JSX.Element = () => {
9 | const inputsData = useAppSelector((state) => state.inputsData);
10 |
11 | //---------------------------- inputting all inputs into an array
12 | const inputsArr: JSX.Element[] = [];
13 | for (let i = 0; i < inputsData.length; i++) {
14 | inputsArr.push({inputsArr} ;
20 | };
21 |
22 | export default TartgetInputs;
23 |
--------------------------------------------------------------------------------
/src/client/components/testConfigComponents/buttonStopSpinner.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Backdrop from '@material-ui/core/Backdrop';
3 | import CircularProgress from '@material-ui/core/CircularProgress';
4 | import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
5 |
6 | import { useAppSelector, useAppDispatch } from '../../state/hooks';
7 | import Actions from '../../state/actions/actions';
8 | const useStyles = makeStyles((theme: Theme) =>
9 | createStyles({
10 | backdrop: {
11 | zIndex: theme.zIndex.drawer + 1,
12 | color: '#fff',
13 | },
14 | })
15 | );
16 |
17 | const SimpleBackdrop: () => JSX.Element = () => {
18 | const dispatch = useAppDispatch();
19 | const isSpinning = useAppSelector((state) => state.stoppingSpinner);
20 | const classes = useStyles();
21 |
22 | return (
23 |
24 | dispatch(Actions.SetStoppingSpinner(false))}
28 | >
29 |
31 |
32 | );
33 | };
34 |
35 | export default SimpleBackdrop;
36 |
--------------------------------------------------------------------------------
/src/client/components/testConfigComponents/buttonsstartstop.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Container from 'react-bootstrap/Container';
3 | import Row from 'react-bootstrap/Row';
4 | import Col from 'react-bootstrap/Col';
5 | import Button from 'react-bootstrap/Button';
6 |
7 | import { useAppSelector, useAppDispatch } from '../../state/hooks';
8 | import Actions from '../../state/actions/actions';
9 |
10 | import { HTTPMethods, TestConfigData } from '../../interfaces';
11 | import StopButtonSpinner from './buttonStopSpinner';
12 |
13 | const Buttons: () => JSX.Element = () => {
14 | const isTestRunning = useAppSelector((state) => state.isTestRunning);
15 | const valueRPS = useAppSelector((state) => state.valueRPS);
16 | const valueStart = useAppSelector((state) => state.valueStart);
17 | const valueEnd = useAppSelector((state) => state.valueEnd);
18 | const valueSeconds = useAppSelector((state) => state.valueSeconds);
19 | const inputsData = useAppSelector((state) => state.inputsData);
20 | const dispatch = useAppDispatch();
21 |
22 | const jagEndabledInputs = inputsData.some((target) => !target.jagTesterEnabled);
23 |
24 | const handleStopTest = () => {
25 | dispatch(Actions.SetStoppingSpinner(true));
26 | fetch('/api/stopTest')
27 | .then(() => {
28 | dispatch(Actions.SetStoppingSpinner(false));
29 | })
30 | .catch((err) => {
31 | dispatch(Actions.SetShowModal(true));
32 | dispatch(Actions.SetModalError(err.toString()));
33 | });
34 | };
35 |
36 | const handleStartTest = () => {
37 | dispatch(Actions.SetCurRunningRPS(0));
38 | dispatch(Actions.SetCurTestStartTime(Date.now()));
39 | const testConfigObj: TestConfigData = {
40 | rpsInterval: valueRPS,
41 | startRPS: valueStart,
42 | endRPS: valueEnd,
43 | testLength: valueSeconds,
44 | inputsData,
45 | };
46 | fetch('/api/startmultiple', {
47 | method: HTTPMethods.POST,
48 | headers: new Headers({ 'Content-Type': 'application/json' }),
49 | body: JSON.stringify(testConfigObj),
50 | }).catch((err) => {
51 | dispatch(Actions.SetShowModal(true));
52 | dispatch(Actions.SetModalError(err.toString()));
53 | });
54 | };
55 |
56 | return (
57 |
58 |
59 |
65 | Start Testing
66 |
67 |
68 |
75 | Stop
76 |
77 |
78 | dispatch(Actions.ResetState())}
83 | >
84 | Reset to default
85 |
86 |
87 |
88 |
90 | );
91 | };
92 |
93 | export default Buttons;
94 |
--------------------------------------------------------------------------------
/src/client/components/testConfigComponents/highrpswarning.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Snackbar from '@material-ui/core/Snackbar';
3 | import MuiAlert, { AlertProps } from '@material-ui/lab/Alert';
4 | import { makeStyles, Theme } from '@material-ui/core/styles';
5 |
6 | import { useAppSelector, useAppDispatch } from '../../state/hooks';
7 | import Actions from '../../state/actions/actions';
8 |
9 | function Alert(props: AlertProps) {
10 | return
37 |
38 |
39 | Jagtester may experience slowdowns when testing higher RPS. Results will still
40 | be accurate, but the test might take longer than expected. In case the Jagtester
41 | server freezes, stop the server and reset with the button below.
42 |
43 |
44 |
38 |
39 |
41 |
47 |
48 |
49 |
50 | );
51 | };
52 |
53 | export default TestProgrss;
54 |
--------------------------------------------------------------------------------
/src/client/img/noresults.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/jagtester/6b18bb13f6b0d851a83648b007993c70b1411e87/src/client/img/noresults.png
--------------------------------------------------------------------------------
/src/client/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Jagtester
8 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/src/client/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './app';
4 | import { BrowserRouter } from 'react-router-dom';
5 | import { Provider } from 'react-redux';
6 | import store from './state/store';
7 |
8 | import { PersistGate } from 'redux-persist/integration/react';
9 | import { persistStore } from 'redux-persist';
10 | const persistor = persistStore(store);
11 |
12 | ReactDOM.render(
13 |
14 | {process.env.JAG === 'demo' ? (
15 |
16 |
18 | ) : (
19 |
20 |
21 |
23 |
24 | )}
25 | ,
26 | document.getElementById('root')
27 | );
28 |
--------------------------------------------------------------------------------
/src/client/interfaces.ts:
--------------------------------------------------------------------------------
1 | export interface TimeArrInterface {
2 | receivedTotalTime: number;
3 | recordedTotalTime: number;
4 | }
5 |
6 | export interface CollectedData {
7 | [key: string]: {
8 | reqId: string;
9 | reqRoute: string;
10 | middlewares: {
11 | fnName: string;
12 | elapsedTime: number;
13 | }[];
14 | };
15 | }
16 |
17 | export interface CollectedDataSingle {
18 | receivedTime?: number;
19 | recordedTime?: number;
20 | errorCount?: number;
21 | requestCount?: number;
22 | successfulResCount?: number;
23 | RPS?: number;
24 | reqId?: string;
25 | reqRoute: string;
26 | middlewares: {
27 | fnName: string;
28 | elapsedTime: number;
29 | }[];
30 | }
31 |
32 | export enum Jagtestercommands {
33 | updateLayer,
34 | running,
35 | endTest,
36 | }
37 |
38 | export enum ioSocketCommands {
39 | testRunningStateChange = 'testRunningStateChange',
40 | singleRPSfinished = 'singleRPSfinished',
41 | allRPSfinished = 'allRPSfinished',
42 | errorInfo = 'errorInfo',
43 | currentRPSProgress = 'currentRPSProgress',
44 | }
45 |
46 | export interface TestConfigData {
47 | rpsInterval: number;
48 | startRPS: number;
49 | endRPS: number;
50 | testLength: number;
51 | inputsData: {
52 | method: string;
53 | targetURL: string;
54 | percentage: number;
55 | jagTesterEnabled: boolean;
56 | }[];
57 | }
58 |
59 | export interface PulledDataFromTest {
60 | [key: string]: {
61 | [key: string]: CollectedDataSingle;
62 | };
63 | }
64 |
65 | export interface AllPulledDataFromTest {
66 | testTime: number;
67 | testData: PulledDataFromTest;
68 | }
69 |
70 | export enum HTTPMethods {
71 | GET = 'GET',
72 | POST = 'POST',
73 | PUT = 'PUT',
74 | DELETE = 'DELETE',
75 | PATCH = 'PATCH',
76 | HEAD = 'HEAD',
77 | CONNECT = 'CONNECT',
78 | TRACE = 'TRACE',
79 | }
80 |
81 | export interface ChartDataSet {
82 | type: string;
83 | label: string;
84 | data: number[];
85 | backgroundColor: string[];
86 | borderWidth: number;
87 | borderColor?: string;
88 | fill?: boolean;
89 | yAxisID?: string;
90 | order?: number;
91 | }
92 |
--------------------------------------------------------------------------------
/src/client/pages/results.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Container from 'react-bootstrap/Container';
3 | import Row from 'react-bootstrap/Row';
4 | import Col from 'react-bootstrap/Col';
5 | import Button from 'react-bootstrap/Button';
6 | import ButtonGroup from 'react-bootstrap/ButtonGroup';
7 | import VerticalTabs from '../components/resultsComponents/verticalTabs';
8 | import { useAppSelector, useAppDispatch } from '../state/hooks';
9 | import Actions from '../state/actions/actions';
10 |
11 | const ResultsPage: () => JSX.Element = () => {
12 | const receivedData = useAppSelector((state) => state.receivedData);
13 | const dispatch = useAppDispatch();
14 |
15 | //Export JSON function
16 | const download = () => {
17 | const element = document.createElement('a');
18 | element.setAttribute(
19 | 'href',
20 | 'data:application/json;charset=utf-8,' +
21 | encodeURIComponent(JSON.stringify(receivedData, null, 4))
22 | );
23 | element.setAttribute('download', `jagtester-exportall-${new Date().toLocaleString()}.json`);
24 | element.style.display = 'none';
25 | document.body.appendChild(element);
26 | element.click();
27 | document.body.removeChild(element);
28 | };
29 |
30 | const deleteAllData = () => {
31 | dispatch(Actions.DeleteReceivedData());
32 | dispatch(Actions.SetResultsTabValue(0));
33 | };
34 |
35 | return (
36 |
37 | {receivedData.length > 0 && (
38 |
39 |
41 |
42 | Export All
43 |
44 |
45 | Delete All
46 |
47 |
48 |
49 |
50 | )}
51 |
52 |
54 |
55 | );
56 | };
57 |
58 | export default ResultsPage;
59 |
--------------------------------------------------------------------------------
/src/client/pages/testconfigpage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Row from 'react-bootstrap/Row';
3 | import Col from 'react-bootstrap/Col';
4 |
5 | import Buttons from '../components/testConfigComponents/buttonsstartstop';
6 | import TargetInputs from '../components/testConfigComponents/TargetInputs';
7 | import RangeSliders from '../components/testConfigComponents/RangeSliders';
8 |
9 | //MUI imports
10 | import Card from '@material-ui/core/Card';
11 | import CardContent from '@material-ui/core/CardContent';
12 | import Typography from '@material-ui/core/Typography';
13 |
14 | const TestPage: () => JSX.Element = () => {
15 | return (
16 |
17 |
19 |
20 |
22 |
23 |
24 |
26 |
27 |
31 | Warning! Currently running in demo mode and you cannot start any tests. You can look around the app and check out our features. Take a look at the results page and see what kinds of
32 | data we are reporting. To use it, simply download from npm and use it locally.
33 |
34 | )}
35 |
36 |
37 |
38 |
39 | );
40 | };
41 |
42 | export default TestPage;
43 |
--------------------------------------------------------------------------------
/src/client/state/actions/actions.ts:
--------------------------------------------------------------------------------
1 | import { createAction } from '@reduxjs/toolkit';
2 |
3 | import { HTTPMethods, AllPulledDataFromTest } from '../../interfaces';
4 |
5 | enum ActionTypes {
6 | setValueRPS = 'setValueRPS',
7 | setValueStart = 'setValueStart',
8 | setValueEnd = 'setValueEnd',
9 | setValueSeconds = 'setValueSeconds',
10 | setIsTestRunning = 'setIsTestRunning',
11 | setCurRunningRPS = 'setCurRunningRPS',
12 |
13 | changeTargetMethod = 'changeTargetMethod',
14 | changeTargetURL = 'changeTargetURL',
15 | changeTargetJagEnabled = 'changeTargetJagEnabled',
16 | changeTargetPercent = 'changeTargetPercent',
17 | addTarget = 'addTarget',
18 | deleteTarget = 'deleteTarget',
19 |
20 | setReceivedData = 'setRedeceivedData',
21 | deleteReceivedData = 'deleteReceivedData',
22 |
23 | setShowModal = 'setShowModal',
24 | setModalError = 'setModalError',
25 |
26 | deleteSingleData = 'deleteSingleData',
27 | setResultsTabValue = 'setResultsTabValue',
28 | setCurRPSpercent = 'setCurRPSpercent',
29 |
30 | setCurTestStartTime = 'setCurTestStartTime',
31 | setDarkMode = 'setDarkMode',
32 | resetState = 'resetState',
33 | setHighRPSwarning = 'setHighRPSwarning',
34 | setStoppingSpinner = 'setStoppingSpinner',
35 | }
36 |
37 | const SetValueRPS = createAction(ActionTypes.setValueRPS);
38 | const SetValueStart = createAction(ActionTypes.setValueStart);
39 | const SetValueEnd = createAction(ActionTypes.setValueEnd);
40 | const SetValueSeconds = createAction(ActionTypes.setValueSeconds);
41 | const SetIsTestRunning = createAction(ActionTypes.setIsTestRunning);
42 | const SetCurRunningRPS = createAction(ActionTypes.setCurRunningRPS);
43 | const ChangeTargetMethod = createAction<{ index: number; method: HTTPMethods }>(
44 | ActionTypes.changeTargetMethod
45 | );
46 | const ChangeTargetURL = createAction<{ index: number; newURL: string }>(
47 | ActionTypes.changeTargetURL
48 | );
49 | const ChangeTargetJagEnabled = createAction<{ index: number; isEnabled: boolean }>(
50 | ActionTypes.changeTargetJagEnabled
51 | );
52 | const ChangeTargetPercent = createAction<{ index: number; newValue: number }>(
53 | ActionTypes.changeTargetPercent
54 | );
55 | const AddTarget = createAction(ActionTypes.addTarget);
56 | const DeleteTarget = createAction(ActionTypes.deleteTarget);
57 |
58 | const SetReceivedData = createAction(ActionTypes.setReceivedData);
59 | const DeleteReceivedData = createAction(ActionTypes.deleteReceivedData);
60 |
61 | const SetShowModal = createAction(ActionTypes.setShowModal);
62 | const SetModalError = createAction(ActionTypes.setModalError);
63 | const DeleteSingleData = createAction(ActionTypes.deleteSingleData);
64 | const SetResultsTabValue = createAction(ActionTypes.setResultsTabValue);
65 | const SetCurRPSpercent = createAction(ActionTypes.setCurRPSpercent);
66 | const SetCurTestStartTime = createAction(ActionTypes.setCurTestStartTime);
67 | const SetDarkMode = createAction(ActionTypes.setDarkMode);
68 | const ResetState = createAction(ActionTypes.resetState);
69 | const SetHighRPSwarning = createAction(ActionTypes.setHighRPSwarning);
70 | const SetStoppingSpinner = createAction(ActionTypes.setStoppingSpinner);
71 |
72 | const Actions = {
73 | SetValueRPS,
74 | SetValueStart,
75 | SetValueEnd,
76 | SetValueSeconds,
77 | SetIsTestRunning,
78 | SetCurRunningRPS,
79 | ChangeTargetMethod,
80 | ChangeTargetURL,
81 | ChangeTargetJagEnabled,
82 | ChangeTargetPercent,
83 | AddTarget,
84 | DeleteTarget,
85 | SetReceivedData,
86 | SetShowModal,
87 | SetModalError,
88 | DeleteSingleData,
89 | SetResultsTabValue,
90 | SetCurRPSpercent,
91 | SetCurTestStartTime,
92 | SetDarkMode,
93 | ResetState,
94 | DeleteReceivedData,
95 | SetHighRPSwarning,
96 | SetStoppingSpinner,
97 | };
98 |
99 | export default Actions;
100 |
--------------------------------------------------------------------------------
/src/client/state/hooks.ts:
--------------------------------------------------------------------------------
1 | import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
2 | import type { RootState, AppDispatch } from './store';
3 |
4 | // Use throughout your app instead of plain `useDispatch` and `useSelector`
5 | export const useAppDispatch: () => ReturnType = () =>
6 | useDispatch();
7 | export const useAppSelector: TypedUseSelectorHook = useSelector;
8 |
--------------------------------------------------------------------------------
/src/client/state/reducers/configReducer.ts:
--------------------------------------------------------------------------------
1 | import Actions from '../actions/actions';
2 | import { createReducer } from '@reduxjs/toolkit';
3 |
4 | import { HTTPMethods } from '../../interfaces';
5 |
6 | import { initialState } from './initialState';
7 |
8 | const calculateTotalTestPercent = (
9 | valueRPS: number,
10 | valueStart: number,
11 | valueEnd: number,
12 | curRunningRPS: number,
13 | curRPSpercent: number
14 | ) => {
15 | const range = (valueEnd - valueStart) / valueRPS;
16 |
17 | return curRunningRPS === 0
18 | ? Math.round((100 * curRPSpercent) / (range + 1))
19 | : Math.round(
20 | (100 * ((curRunningRPS - valueStart) / valueRPS + 1 + curRPSpercent)) / (range + 1)
21 | );
22 | };
23 |
24 | const configReducer = createReducer(initialState, (builder) => {
25 | builder
26 | .addCase(Actions.SetValueRPS, (state, action) => {
27 | state.valueRPS = action.payload;
28 | })
29 | .addCase(Actions.SetValueStart, (state, action) => {
30 | state.valueStart = action.payload;
31 | })
32 | .addCase(Actions.SetValueEnd, (state, action) => {
33 | if (state.valueEnd < 10000 && action.payload > 10000) {
34 | state.highRPSwarning = true;
35 | }
36 | state.valueEnd = action.payload;
37 | })
38 | .addCase(Actions.SetValueSeconds, (state, action) => {
39 | state.valueSeconds = action.payload;
40 | })
41 | .addCase(Actions.SetIsTestRunning, (state, action) => {
42 | state.isTestRunning = action.payload;
43 | })
44 | .addCase(Actions.SetCurRunningRPS, (state, action) => {
45 | state.curRunningRPS = action.payload;
46 | state.curTestTotalPercent = calculateTotalTestPercent(
47 | state.valueRPS,
48 | state.valueStart,
49 | state.valueEnd,
50 | state.curRunningRPS,
51 | state.curRPSpercent
52 | );
53 | })
54 | .addCase(Actions.ChangeTargetMethod, (state, action) => {
55 | state.inputsData[action.payload.index].method = action.payload.method;
56 | })
57 | .addCase(Actions.ChangeTargetURL, (state, action) => {
58 | state.inputsData[action.payload.index].targetURL = action.payload.newURL;
59 | })
60 | .addCase(Actions.ChangeTargetJagEnabled, (state, action) => {
61 | state.inputsData[action.payload.index].jagTesterEnabled = action.payload.isEnabled;
62 | })
63 | .addCase(Actions.ChangeTargetPercent, (state, action) => {
64 | let index = action.payload.index;
65 | const newValue = action.payload.newValue;
66 | let diffWithNext = state.inputsData[index].percentage - newValue;
67 | const diffWithNextCopy = diffWithNext;
68 | while (diffWithNext !== 0) {
69 | index = index < state.inputsData.length - 1 ? index + 1 : 0;
70 |
71 | if (state.inputsData[index].percentage + diffWithNext > 100) {
72 | diffWithNext = diffWithNext - (100 - state.inputsData[index].percentage);
73 | state.inputsData[index].percentage = 100;
74 | } else if (state.inputsData[index].percentage + diffWithNext < 0) {
75 | diffWithNext = state.inputsData[index].percentage + diffWithNext;
76 | state.inputsData[index].percentage = 0;
77 | } else {
78 | state.inputsData[index].percentage =
79 | state.inputsData[index].percentage + diffWithNext;
80 | break;
81 | }
82 | }
83 | state.inputsData[action.payload.index].percentage -= diffWithNextCopy;
84 | })
85 | .addCase(Actions.AddTarget, (state) => {
86 | state.inputsData.push({
87 | method: HTTPMethods.GET,
88 | targetURL: '',
89 | percentage: 0,
90 | jagTesterEnabled: false,
91 | });
92 | const percentagePerInput = Math.floor(100 / state.inputsData.length);
93 | for (let i = 0; i < state.inputsData.length; i++) {
94 | state.inputsData[i].percentage = percentagePerInput;
95 | }
96 | if (state.inputsData.length > 0)
97 | state.inputsData[0].percentage +=
98 | 100 - state.inputsData.length * percentagePerInput;
99 | })
100 | .addCase(Actions.DeleteTarget, (state, action) => {
101 | state.inputsData.splice(action.payload, 1);
102 | })
103 | .addCase(Actions.SetReceivedData, (state, action) => {
104 | state.receivedData.push(...action.payload);
105 | })
106 | .addCase(Actions.DeleteReceivedData, (state) => {
107 | state.receivedData = [];
108 | })
109 | .addCase(Actions.SetShowModal, (s, a) => {
110 | s.showModal = a.payload;
111 | })
112 | .addCase(Actions.SetModalError, (state, action) => {
113 | state.modalError = action.payload;
114 | })
115 | .addCase(Actions.DeleteSingleData, (state, action) => {
116 | state.receivedData.splice(action.payload, 1);
117 | })
118 | .addCase(Actions.SetResultsTabValue, (state, action) => {
119 | state.resultsTabValue = Math.max(
120 | Math.min(action.payload, state.receivedData.length - 1),
121 | 0
122 | );
123 | })
124 | .addCase(Actions.SetCurRPSpercent, (state, action) => {
125 | state.curRPSpercent = action.payload;
126 | state.curTestTotalPercent = calculateTotalTestPercent(
127 | state.valueRPS,
128 | state.valueStart,
129 | state.valueEnd,
130 | state.curRunningRPS,
131 | state.curRPSpercent
132 | );
133 | })
134 | .addCase(Actions.SetCurTestStartTime, (state, action) => {
135 | state.curTestStartTime = action.payload;
136 | })
137 | .addCase(Actions.SetDarkMode, (state, action) => {
138 | state.darkMode = action.payload;
139 | })
140 | .addCase(Actions.ResetState, (state) => {
141 | state.valueRPS = initialState.valueRPS;
142 | state.valueStart = initialState.valueStart;
143 | state.valueEnd = initialState.valueEnd;
144 | state.valueSeconds = initialState.valueSeconds;
145 | state.isTestRunning = initialState.isTestRunning;
146 | state.curRunningRPS = initialState.curRunningRPS;
147 | state.showModal = initialState.showModal;
148 | state.modalError = initialState.modalError;
149 | state.resultsTabValue = initialState.resultsTabValue;
150 | state.curRPSpercent = initialState.curRPSpercent;
151 | state.curTestTotalPercent = initialState.curTestTotalPercent;
152 | state.curTestStartTime = initialState.curTestStartTime;
153 | state.highRPSwarning = initialState.highRPSwarning;
154 | state.stoppingSpinner = initialState.stoppingSpinner;
155 | })
156 | .addCase(Actions.SetHighRPSwarning, (state, action) => {
157 | state.highRPSwarning = action.payload;
158 | })
159 | .addCase(Actions.SetStoppingSpinner, (state, action) => {
160 | state.stoppingSpinner = action.payload;
161 | });
162 | });
163 |
164 | export default configReducer;
165 |
--------------------------------------------------------------------------------
/src/client/state/store.ts:
--------------------------------------------------------------------------------
1 | import { configureStore } from '@reduxjs/toolkit';
2 | import configReducer from './reducers/configReducer';
3 |
4 | import storage from 'redux-persist/lib/storage';
5 | import { persistReducer } from 'redux-persist';
6 |
7 | const persistConfig = {
8 | key: 'root',
9 | storage,
10 | };
11 |
12 | const persistedReducer = persistReducer(persistConfig, configReducer);
13 |
14 | const store = configureStore({
15 | reducer: persistedReducer,
16 | devTools: process.env.NODE_ENV !== 'production',
17 | });
18 |
19 | const storeNoPersist = configureStore({
20 | reducer: configReducer,
21 | devTools: process.env.NODE_ENV !== 'production',
22 | });
23 |
24 | export type RootState = ReturnType;
25 | export type AppDispatch = typeof store.dispatch;
26 | export default process.env.JAG === 'demo' ? storeNoPersist : store;
27 |
--------------------------------------------------------------------------------
/src/client/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "rootDir": ".",
4 | "lib": ["dom", "dom.iterable", "esnext", "webworker", "es6", "scripthost"],
5 | "allowJs": true,
6 | "outDir": "../../dist/client",
7 | "allowSyntheticDefaultImports": true,
8 | "skipLibCheck": true,
9 | "esModuleInterop": true,
10 | "strict": true,
11 | "forceConsistentCasingInFileNames": true,
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "noEmit": true,
16 | "jsx": "react",
17 | "paths": {
18 | "*": ["../../node_modules/*"]
19 | }
20 | },
21 | "include": ["./**/*", "../custom.d.ts"]
22 | }
23 |
--------------------------------------------------------------------------------
/src/custom.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.svg' {
2 | const content: string;
3 | export default content;
4 | }
5 | declare module '*.png' {
6 | const content: string;
7 | export default content;
8 | }
9 |
--------------------------------------------------------------------------------
/src/middleware/index.ts:
--------------------------------------------------------------------------------
1 | import { Request, Response, NextFunction, Application } from 'express';
2 | import responseTime from 'response-time';
3 |
4 | type FunctionType = (
5 | app: Application
6 | ) => (req: Request, res: Response, next: NextFunction) => unknown;
7 |
8 | interface CollectedData {
9 | [key: string]: {
10 | reqId: string;
11 | reqRoute: string;
12 | middlewares: {
13 | fnName: string;
14 | elapsedTime: number;
15 | }[];
16 | };
17 | }
18 |
19 | interface RouteData {
20 | [key: string]: CollectedData;
21 | }
22 |
23 | enum Jagtestercommands {
24 | updateLayer,
25 | running,
26 | endTest,
27 | }
28 |
29 | const getMiddleware: FunctionType = (app: Application) => {
30 | let collectedData: CollectedData = {};
31 | let routeData: RouteData = {};
32 | let isPrototypeChanged = false;
33 |
34 | const resetLayerPrototype = () => {
35 | app._router.stack[0].__proto__.handle_request = originalLayerHandleRequest;
36 | isPrototypeChanged = false;
37 | collectedData = {};
38 | routeData = {};
39 | };
40 |
41 | const updateLayerPrototype = () => {
42 | app._router.stack[0].__proto__.handle_request = newLayerHandleRequest;
43 | isPrototypeChanged = true;
44 | collectedData = {};
45 | routeData = {};
46 | };
47 |
48 | const originalLayerHandleRequest = function handle(
49 | req: Request,
50 | res: Response,
51 | next: NextFunction
52 | ) {
53 | const fn = this.handle;
54 |
55 | if (fn.length > 3) {
56 | // not a standard request handler
57 | return next();
58 | }
59 |
60 | try {
61 | fn(req, res, next);
62 | } catch (err) {
63 | next(err);
64 | }
65 | };
66 |
67 | const newLayerHandleRequest = function handle(req: Request, res: Response, next: NextFunction) {
68 | const fn = this.handle;
69 |
70 | if (fn.length > 3) {
71 | // not a standard request handler
72 | return next();
73 | }
74 |
75 | try {
76 | const fnName = this.name,
77 | reqId = req.headers.jagtesterreqid
78 | ? req.headers.jagtesterreqid.toString()
79 | : undefined,
80 | reqRoute = req.originalUrl;
81 |
82 | // create a data object in the collected data if it doesnt already exist
83 | if (!routeData[reqRoute]) {
84 | const newCollectedData: CollectedData = {};
85 | newCollectedData[reqId] = {
86 | reqId,
87 | reqRoute,
88 | middlewares: [],
89 | };
90 | routeData[reqRoute] = newCollectedData;
91 | } else {
92 | // create a data object in the collected data if it doesnt already exist
93 | if (reqId && !routeData[reqRoute][reqId]) {
94 | routeData[reqRoute][reqId] = {
95 | reqId,
96 | reqRoute,
97 | middlewares: [],
98 | };
99 | }
100 | }
101 |
102 | // create a data object in the collected data if it doesnt already exist
103 | if (reqId && !collectedData[reqId]) {
104 | collectedData[reqId] = {
105 | reqId,
106 | reqRoute,
107 | middlewares: [],
108 | };
109 | }
110 |
111 | if (reqId) {
112 | // add layer information to the collectedData
113 | routeData[reqRoute][reqId].middlewares.push({
114 | fnName,
115 | elapsedTime: 0,
116 | });
117 |
118 | collectedData[reqId].middlewares.push({
119 | fnName,
120 | elapsedTime: 0,
121 | });
122 | }
123 |
124 | // call the middleware and time it in the next function
125 | const beforeFunctionCall = Date.now();
126 | fn(req, res, function () {
127 | if (reqId && routeData[reqRoute] && routeData[reqRoute][reqId]) {
128 | const lastElIndex = routeData[reqRoute][reqId].middlewares.length - 1;
129 | routeData[reqRoute][reqId].middlewares[lastElIndex].elapsedTime =
130 | Date.now() - beforeFunctionCall;
131 | }
132 | next();
133 | });
134 | } catch (err) {
135 | next(err);
136 | }
137 | };
138 |
139 | // this is the actual middleware that will take jagtestercommands
140 | return (req: Request, res: Response, next: NextFunction) => {
141 | // getting the command
142 | const jagtestercommand = +req.headers.jagtestercommand;
143 |
144 | switch (jagtestercommand) {
145 | //changing the prototype of the layer handle request while running
146 | case Jagtestercommands.running:
147 | if (!isPrototypeChanged) {
148 | updateLayerPrototype();
149 | }
150 | // res.header({ jagtesterRoute: req.url });
151 | break;
152 |
153 | //changing the prototype of the layer handle request
154 | case Jagtestercommands.updateLayer:
155 | updateLayerPrototype();
156 | // res.header({ jagtesterRoute: req.url });
157 | return res.json({ jagtester: true });
158 |
159 | //reset the prototype and send back json data
160 | case Jagtestercommands.endTest:
161 | res.json(routeData);
162 | resetLayerPrototype();
163 | return;
164 |
165 | default:
166 | // changing layer prototype back to original
167 | if (isPrototypeChanged) {
168 | resetLayerPrototype();
169 | }
170 | break;
171 | }
172 | return responseTime({ suffix: false })(req, res, next);
173 | };
174 | };
175 | export default getMiddleware;
176 | module.exports = getMiddleware;
177 |
--------------------------------------------------------------------------------
/src/middleware/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "rootDir": ".",
4 | "module": "commonjs",
5 | "esModuleInterop": true,
6 | "target": "ES5",
7 | "noImplicitAny": true,
8 | "moduleResolution": "node",
9 | "declaration": true,
10 | "sourceMap": false,
11 | "outDir": "../../dist/middleware",
12 | "baseUrl": ".",
13 | "paths": {
14 | "*": ["../../node_modules/*"]
15 | }
16 | },
17 | "files": ["./index.ts"],
18 | "exclude": ["../../node_modules/*"]
19 | }
20 |
--------------------------------------------------------------------------------
/src/server/app.ts:
--------------------------------------------------------------------------------
1 | import express from 'express';
2 | import path from 'path';
3 | import testRouter from './testrouter';
4 |
5 | const app = express();
6 |
7 | app.use(express.json());
8 |
9 | app.use(express.urlencoded({ extended: false }));
10 |
11 | app.use('/', express.static(path.join(__dirname, '../client')));
12 |
13 | app.use('/api', testRouter);
14 |
15 | app.get(['/', '/results'], (req, res) => {
16 | res.sendFile(path.join(__dirname, '../client/index.html'));
17 | });
18 |
19 | app.use('/*', (req, res) => {
20 | res.redirect('/');
21 | });
22 |
23 | export { app };
24 |
--------------------------------------------------------------------------------
/src/server/helpers/allRPSfinished.ts:
--------------------------------------------------------------------------------
1 | import fetch from 'node-fetch';
2 | import { Server } from 'socket.io';
3 | import AbortController from 'abort-controller';
4 | import {
5 | ioSocketCommands,
6 | Jagtestercommands,
7 | CollectedData,
8 | TestConfigData,
9 | GlobalVariables,
10 | } from '../interfaces';
11 |
12 | import processData from './processData';
13 | import processLastMiddleware from './processLastMiddleware';
14 |
15 | type AllRPSfinished = (
16 | globalTestConfig: TestConfigData,
17 | io: Server,
18 | globalVariables: GlobalVariables
19 | ) => void;
20 |
21 | const allRPSfinished: AllRPSfinished = (
22 | globalTestConfig: TestConfigData,
23 | io: Server,
24 | globalVariables: GlobalVariables
25 | ) => {
26 | fetch(globalTestConfig.inputsData[0].targetURL, {
27 | headers: {
28 | jagtestercommand: Jagtestercommands.endTest.toString(),
29 | },
30 | }).catch((err) => {
31 | io.emit(ioSocketCommands.errorInfo, err.toString());
32 | });
33 | globalVariables.abortController = new AbortController();
34 | globalVariables.isTestRunning = false;
35 |
36 | // clear timeouts
37 | for (const timeout of globalVariables.timeOutArray) {
38 | clearTimeout(timeout);
39 | }
40 | globalVariables.timeOutArray.splice(0, globalVariables.timeOutArray.length);
41 |
42 | // getting the average response time, since we had the total response times added together
43 | for (const route in globalVariables.timeArrRoutes) {
44 | for (const rpsGroup in globalVariables.timeArrRoutes[route]) {
45 | globalVariables.timeArrRoutes[route][rpsGroup].receivedTotalTime =
46 | Math.round(
47 | (1000 * globalVariables.timeArrRoutes[route][rpsGroup].receivedTotalTime) /
48 | globalVariables.timeArrRoutes[route][rpsGroup].successfulResCount
49 | ) / 1000;
50 | }
51 | }
52 |
53 | // processing middlewares, averaging them, then combining timearrroutes
54 | for (const rps in globalVariables.pulledDataFromTest) {
55 | for (const route in globalVariables.pulledDataFromTest[rps]) {
56 | globalVariables.pulledDataFromTest[rps][route] = processData(
57 | globalVariables.pulledDataFromTest[rps][route] as CollectedData
58 | );
59 | globalVariables.pulledDataFromTest[rps][route].receivedTime =
60 | globalVariables.timeArrRoutes[route][rps].receivedTotalTime;
61 | globalVariables.pulledDataFromTest[rps][route].errorCount =
62 | globalVariables.timeArrRoutes[route][rps].errorCount;
63 | globalVariables.pulledDataFromTest[rps][route].successfulResCount =
64 | globalVariables.timeArrRoutes[route][rps].successfulResCount;
65 |
66 | //fixing the elapsed time for the last middleware
67 | processLastMiddleware(globalVariables.pulledDataFromTest, rps, route);
68 | }
69 | }
70 |
71 | if (Object.keys(globalVariables.pulledDataFromTest).length > 0) {
72 | const newPulledData = {
73 | testTime: Date.now(),
74 | testData: globalVariables.pulledDataFromTest,
75 | };
76 | io.emit(ioSocketCommands.allRPSfinished, [newPulledData]);
77 | }
78 | };
79 |
80 | export default allRPSfinished;
81 | export type { AllRPSfinished };
82 |
--------------------------------------------------------------------------------
/src/server/helpers/emitPercentage.ts:
--------------------------------------------------------------------------------
1 | import { Server } from 'socket.io';
2 | import { GlobalVariables, ioSocketCommands } from '../interfaces';
3 |
4 | type EmitPercentage = (
5 | globalVariables: GlobalVariables,
6 | rpsGroup: number,
7 | secondsToTest: number,
8 | io: Server
9 | ) => void;
10 |
11 | const emitPercentage: EmitPercentage = (globalVariables, rpsGroup, secondsToTest, io) => {
12 | const percent =
13 | (globalVariables.successfulResCount + globalVariables.errorCount) /
14 | (rpsGroup * secondsToTest);
15 | if (Math.floor(10000 * percent) % 1000 === 0) {
16 | io.emit(ioSocketCommands.currentRPSProgress, percent);
17 | }
18 | };
19 |
20 | export default emitPercentage;
21 | export type { EmitPercentage };
22 |
--------------------------------------------------------------------------------
/src/server/helpers/processData.ts:
--------------------------------------------------------------------------------
1 | import { CollectedData, CollectedDataSingle } from '../interfaces';
2 |
3 | type ProcessData = (data: CollectedData) => CollectedDataSingle;
4 | const processData: ProcessData = (data: CollectedData) => {
5 | const collectedDataArr: CollectedDataSingle[] = [];
6 | for (const key in data) {
7 | collectedDataArr.push(data[key]);
8 | }
9 |
10 | // add middlewares elapsed times
11 | const collectedDataSingle: CollectedDataSingle = collectedDataArr.reduce((acc, cur) => {
12 | for (let i = 0; i < acc.middlewares.length && i < cur.middlewares.length; i++) {
13 | acc.middlewares[i].elapsedTime += cur.middlewares[i].elapsedTime;
14 | }
15 | return acc;
16 | });
17 |
18 | // divide by the count of requests
19 | collectedDataSingle.middlewares.forEach((middleware) => {
20 | middleware.elapsedTime =
21 | Math.round((100 * middleware.elapsedTime) / collectedDataArr.length) / 100;
22 | });
23 |
24 | return collectedDataSingle;
25 | };
26 |
27 | export default processData;
28 | export type { ProcessData };
29 |
--------------------------------------------------------------------------------
/src/server/helpers/processLastMiddleware.ts:
--------------------------------------------------------------------------------
1 | import { PulledDataFromTest, middlewareSingle } from '../interfaces';
2 |
3 | type ProcessLastMiddleware = (
4 | pulledDataFromTest: PulledDataFromTest,
5 | rps: string,
6 | route: string
7 | ) => void;
8 |
9 | const processLastMiddleware: ProcessLastMiddleware = (pulledDataFromTest, rps, route) => {
10 | const indexOfLast =
11 | (pulledDataFromTest[rps][route].middlewares as middlewareSingle[]).length - 1;
12 | const tempMiddleware: middlewareSingle = {
13 | fnName: 'temp',
14 | elapsedTime: 0,
15 | };
16 |
17 | (pulledDataFromTest[rps][route].middlewares as middlewareSingle[])[indexOfLast].elapsedTime =
18 | Math.round(
19 | 100 *
20 | ((pulledDataFromTest[rps][route].receivedTime as number) -
21 | (pulledDataFromTest[rps][route].middlewares as middlewareSingle[]).reduce(
22 | (acc, cur) => {
23 | acc.elapsedTime += cur.elapsedTime;
24 | return acc;
25 | },
26 | tempMiddleware
27 | ).elapsedTime)
28 | ) / 100;
29 | };
30 |
31 | export default processLastMiddleware;
32 | export type { ProcessLastMiddleware };
33 |
--------------------------------------------------------------------------------
/src/server/helpers/sendRequests.ts:
--------------------------------------------------------------------------------
1 | import { Jagtestercommands, GlobalVariables, TestConfigData } from '../interfaces';
2 |
3 | import fetch from 'node-fetch';
4 | import { Server } from 'socket.io';
5 | import singleRPSfinished from './singleRPSfinished';
6 | import allRPSfinished from './allRPSfinished';
7 | import emitPercentage from './emitPercentage';
8 |
9 | type SendRequests = (
10 | targetURL: string,
11 | rpsGroup: number,
12 | rpsActual: number,
13 | secondsToTest: number,
14 | globalVariables: GlobalVariables,
15 | io: Server,
16 | globalTestConfig: TestConfigData
17 | ) => void;
18 |
19 | const sendRequests: SendRequests = (
20 | targetURL: string,
21 | rpsGroup: number,
22 | rpsActual: number,
23 | secondsToTest: number,
24 | globalVariables: GlobalVariables,
25 | io: Server,
26 | globalTestConfig: TestConfigData
27 | ) => {
28 | const sendFetch = (reqId: number) => {
29 | fetch(targetURL, {
30 | agent: globalVariables.agent,
31 | signal: globalVariables.abortController.signal,
32 | headers: {
33 | jagtestercommand: Jagtestercommands.running.toString(),
34 | jagtesterreqid: reqId.toString(),
35 | },
36 | })
37 | .then((res) => {
38 | const resRoute = new URL(targetURL).pathname;
39 | globalVariables.timeArrRoutes[resRoute][rpsGroup].successfulResCount++;
40 | globalVariables.successfulResCount++;
41 | emitPercentage(globalVariables, rpsGroup, secondsToTest, io);
42 | if (
43 | globalVariables.successfulResCount + globalVariables.errorCount >=
44 | rpsGroup * secondsToTest
45 | ) {
46 | singleRPSfinished(rpsGroup, io, globalTestConfig, globalVariables);
47 | }
48 | if (res.headers.has('x-response-time')) {
49 | const xResponseTime = res.headers.get('x-response-time');
50 | globalVariables.timeArrRoutes[resRoute][rpsGroup].receivedTotalTime +=
51 | xResponseTime ? +xResponseTime : 0;
52 | }
53 | })
54 | .catch((error) => {
55 | if (error.name === 'AbortError') {
56 | if (globalVariables.isTestRunning) {
57 | globalVariables.isTestRunning = false;
58 | // eventEmitter.emit(ioSocketCommands.allRPSfinished);
59 | allRPSfinished(globalTestConfig, io, globalVariables);
60 | }
61 | } else {
62 | const resRoute = new URL(targetURL).pathname;
63 | globalVariables.timeArrRoutes[resRoute][rpsGroup].errorCount++;
64 | globalVariables.errorCount++;
65 | emitPercentage(globalVariables, rpsGroup, secondsToTest, io);
66 | if (
67 | globalVariables.successfulResCount + globalVariables.errorCount >=
68 | rpsGroup * secondsToTest
69 | ) {
70 | singleRPSfinished(rpsGroup, io, globalTestConfig, globalVariables);
71 | }
72 | }
73 | });
74 | };
75 |
76 | // outer for loop to run for every second and set timeouts for after that second
77 | for (let j = 0; j < secondsToTest; j++) {
78 | for (let i = 0; i < rpsActual; i++) {
79 | const timeout = setTimeout(
80 | sendFetch.bind(this, i + j * rpsActual),
81 | Math.floor(Math.random() * 1000 + 1000 * j)
82 | );
83 | globalVariables.timeOutArray.push(timeout);
84 | }
85 | }
86 | return;
87 | };
88 |
89 | export default sendRequests;
90 | export type { SendRequests };
91 |
--------------------------------------------------------------------------------
/src/server/helpers/sendRequestsAtRPS.ts:
--------------------------------------------------------------------------------
1 | import { Jagtestercommands, GlobalVariables, TestConfigData } from '../interfaces';
2 | import { Server } from 'socket.io';
3 | import fetch from 'node-fetch';
4 | import allRPSfinished from './allRPSfinished';
5 | import sendRequests from './sendRequests';
6 |
7 | type SendRequestsAtRPS = (
8 | globalVariables: GlobalVariables,
9 | globalTestConfig: TestConfigData,
10 | io: Server
11 | ) => void;
12 |
13 | const sendRequestsAtRPS: SendRequestsAtRPS = (
14 | globalVariables: GlobalVariables,
15 | globalTestConfig: TestConfigData,
16 | io: Server
17 | ) => {
18 | // check if finished testing
19 | const curRPS =
20 | globalTestConfig.startRPS + globalVariables.currentInterval * globalTestConfig.rpsInterval;
21 |
22 | if (curRPS > globalTestConfig.endRPS) {
23 | allRPSfinished(globalTestConfig, io, globalVariables);
24 | return;
25 | }
26 |
27 | // update layer first then start testing
28 | for (const target of globalTestConfig.inputsData) {
29 | fetch(target.targetURL, {
30 | agent: globalVariables.agent,
31 | headers: {
32 | jagtestercommand: Jagtestercommands.updateLayer.toString(),
33 | },
34 | })
35 | .then(() => {
36 | // saving the resroute into the collection object
37 | const resRoute = new URL(target.targetURL).pathname;
38 | if (globalVariables.timeArrRoutes[resRoute] === undefined) {
39 | globalVariables.timeArrRoutes[resRoute] = {};
40 | }
41 | if (globalVariables.timeArrRoutes[resRoute][curRPS.toString()] === undefined) {
42 | globalVariables.timeArrRoutes[resRoute][curRPS.toString()] = {
43 | receivedTotalTime: 0,
44 | errorCount: 0,
45 | successfulResCount: 0,
46 | };
47 | }
48 |
49 | globalVariables.errorCount = 0;
50 | globalVariables.successfulResCount = 0;
51 | sendRequests(
52 | target.targetURL,
53 | curRPS,
54 | Math.round((curRPS * target.percentage) / 100),
55 | globalTestConfig.testLength,
56 | globalVariables,
57 | io,
58 | globalTestConfig
59 | );
60 | })
61 | .catch(() => {
62 | allRPSfinished(globalTestConfig, io, globalVariables);
63 | });
64 | }
65 | };
66 |
67 | export default sendRequestsAtRPS;
68 | export type { SendRequestsAtRPS };
69 |
--------------------------------------------------------------------------------
/src/server/helpers/singleRPSfinished.ts:
--------------------------------------------------------------------------------
1 | import fetch from 'node-fetch';
2 | import { Server } from 'socket.io';
3 | import {
4 | ioSocketCommands,
5 | Jagtestercommands,
6 | GlobalVariables,
7 | TestConfigData,
8 | } from '../interfaces';
9 | import allRPSfinished from './allRPSfinished';
10 | import sendRequestsAtRPS from './sendRequestsAtRPS';
11 |
12 | type SingleRPSfinished = (
13 | rpsGroup: number,
14 | io: Server,
15 | globalTestConfig: TestConfigData,
16 | globalVariables: GlobalVariables
17 | ) => void;
18 |
19 | const singleRPSfinished: SingleRPSfinished = (
20 | rpsGroup: number,
21 | io: Server,
22 | globalTestConfig: TestConfigData,
23 | globalVariables: GlobalVariables
24 | ) => {
25 | io.emit(ioSocketCommands.singleRPSfinished, rpsGroup);
26 | fetch(globalTestConfig.inputsData[0].targetURL, {
27 | headers: {
28 | jagtestercommand: Jagtestercommands.endTest.toString(),
29 | },
30 | })
31 | .then((fetchRes) => fetchRes.json())
32 | .then((data) => {
33 | const curRPS =
34 | globalTestConfig.startRPS +
35 | globalVariables.currentInterval * globalTestConfig.rpsInterval;
36 | globalVariables.pulledDataFromTest[curRPS.toString()] = data;
37 | globalVariables.currentInterval++;
38 | sendRequestsAtRPS(globalVariables, globalTestConfig, io);
39 | })
40 | .catch(() => {
41 | allRPSfinished(globalTestConfig, io, globalVariables);
42 | });
43 | };
44 |
45 | export default singleRPSfinished;
46 | export type { SingleRPSfinished };
47 |
--------------------------------------------------------------------------------
/src/server/index.ts:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | // TODO use cluster to imrpove our server performance
3 | import { http } from './server';
4 | import open from 'open';
5 |
6 | let port = 15000;
7 |
8 | http.on('error', function (e: NodeJS.ErrnoException) {
9 | if (e.code === 'EADDRINUSE') {
10 | port++;
11 | http.listen(port);
12 | }
13 | });
14 |
15 | const server = http.on('listening', function () {
16 | console.log(`Jagtester running on http://localhost:${port}`);
17 | open(`http://localhost:${port}`).catch((err) => console.log(err));
18 | });
19 |
20 | http.listen(port);
21 |
22 | export default server;
--------------------------------------------------------------------------------
/src/server/interfaces.ts:
--------------------------------------------------------------------------------
1 | import http from 'http';
2 | export interface TimeArrInterface {
3 | receivedTotalTime: number;
4 | recordedTotalTime: number;
5 | }
6 |
7 | export interface middlewareSingle {
8 | fnName: string;
9 | elapsedTime: number;
10 | }
11 |
12 | export interface CollectedData {
13 | [key: string]: {
14 | reqId: string;
15 | reqRoute: string;
16 | middlewares: middlewareSingle[];
17 | };
18 | }
19 |
20 | export interface CollectedDataSingle {
21 | receivedTime?: number;
22 | recordedTime?: number;
23 | errorCount?: number;
24 | requestCount?: number;
25 | successfulResCount?: number;
26 | RPS?: number;
27 | reqId?: string;
28 | reqRoute: string;
29 | middlewares: middlewareSingle[];
30 | }
31 |
32 | export enum Jagtestercommands {
33 | updateLayer,
34 | running,
35 | endTest,
36 | }
37 |
38 | export enum ioSocketCommands {
39 | testRunningStateChange = 'testRunningStateChange',
40 | singleRPSfinished = 'singleRPSfinished',
41 | allRPSfinished = 'allRPSfinished',
42 | errorInfo = 'errorInfo',
43 | currentRPSProgress = 'currentRPSProgress',
44 | }
45 |
46 | export interface TestConfigData {
47 | rpsInterval: number;
48 | startRPS: number;
49 | endRPS: number;
50 | testLength: number;
51 | inputsData: {
52 | method: string;
53 | targetURL: string;
54 | percentage: number;
55 | jagTesterEnabled: boolean;
56 | }[];
57 | }
58 |
59 | export interface PulledDataFromTest {
60 | // used as rps
61 | [key: string]: {
62 | //used as route
63 | [key: string]: CollectedDataSingle | CollectedData;
64 | };
65 | }
66 |
67 | export enum HTTPMethods {
68 | GET = 'GET',
69 | POST = 'POST',
70 | PUT = 'PUT',
71 | DELETE = 'DELETE',
72 | PATCH = 'PATCH',
73 | HEAD = 'HEAD',
74 | CONNECT = 'CONNECT',
75 | TRACE = 'TRACE',
76 | }
77 |
78 | export interface TimeArrRoutes {
79 | // this key is used as the route name
80 | [key: string]: {
81 | //this key is used as the rps number
82 | [key: string]: {
83 | receivedTotalTime: number;
84 | errorCount: number;
85 | successfulResCount: number;
86 | };
87 | };
88 | }
89 |
90 | export interface TrackedVariables {
91 | isTestRunningInternal: boolean;
92 | isTestRunningListener: (val: boolean) => void;
93 | isTestRunning: boolean;
94 | }
95 |
96 | export interface GlobalVariables {
97 | currentInterval: number;
98 | errorCount: number;
99 | successfulResCount: number;
100 | abortController: AbortController;
101 | timeArrRoutes: TimeArrRoutes;
102 | timeOutArray: NodeJS.Timeout[];
103 | pulledDataFromTest: PulledDataFromTest;
104 | isTestRunningInternal: boolean;
105 | isTestRunningListener: (val: boolean) => void;
106 | isTestRunning: boolean;
107 | agent: http.Agent;
108 | }
109 |
--------------------------------------------------------------------------------
/src/server/server.ts:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | // TODO use cluster to imrpove our server performance
3 | import { app } from './app';
4 | import { createServer } from 'http';
5 | import { Server } from 'socket.io';
6 |
7 | const http = createServer(app);
8 | const io = new Server(http);
9 |
10 | export { http, io };
11 |
--------------------------------------------------------------------------------
/src/server/testrouter.ts:
--------------------------------------------------------------------------------
1 | import express from 'express';
2 | import fetch from 'node-fetch';
3 | import http from 'http';
4 | import { io } from './server';
5 | import { Jagtestercommands, TestConfigData, ioSocketCommands, GlobalVariables } from './interfaces';
6 |
7 | import sendRequestsAtRPS from './helpers/sendRequestsAtRPS';
8 |
9 | import AbortController from 'abort-controller';
10 |
11 | const router = express.Router();
12 |
13 | const globalVariables: GlobalVariables = {
14 | currentInterval: 0,
15 | errorCount: 0,
16 | successfulResCount: 0,
17 | abortController: new AbortController(),
18 | timeArrRoutes: {},
19 | timeOutArray: [],
20 | pulledDataFromTest: {},
21 | isTestRunningInternal: false,
22 | agent: new http.Agent({ keepAlive: true }),
23 | isTestRunningListener: (val: boolean) => {
24 | io.emit(ioSocketCommands.testRunningStateChange, val);
25 | },
26 | set isTestRunning(val: boolean) {
27 | this.isTestRunningInternal = val;
28 | this.isTestRunningListener(val);
29 | },
30 | get isTestRunning() {
31 | return this.isTestRunningInternal;
32 | },
33 | };
34 |
35 | let globalTestConfig: TestConfigData;
36 |
37 | router.post('/startmultiple', (req, res) => {
38 | if (!globalVariables.isTestRunning) {
39 | globalVariables.isTestRunning = true;
40 | globalVariables.timeArrRoutes = {};
41 | globalVariables.pulledDataFromTest = {};
42 | globalVariables.currentInterval = 0;
43 | globalTestConfig = {
44 | rpsInterval: req.body.rpsInterval,
45 | startRPS: req.body.startRPS,
46 | endRPS: req.body.endRPS,
47 | testLength: req.body.testLength,
48 | inputsData: req.body.inputsData,
49 | };
50 |
51 | sendRequestsAtRPS(globalVariables, globalTestConfig, io);
52 | }
53 | res.sendStatus(200);
54 | });
55 | router.post('/checkjagtester', (req, res) => {
56 | fetch(req.body.inputURL, {
57 | method: req.body.method,
58 | agent: globalVariables.agent,
59 | headers: {
60 | jagtestercommand: Jagtestercommands.updateLayer.toString(),
61 | },
62 | })
63 | .then((fetchRes) => fetchRes.json())
64 | .then((data) => res.json(data))
65 | .catch(() => res.json({ jagtester: false }));
66 | });
67 |
68 | router.get('/stopTest', (req, res) => {
69 | globalVariables.abortController.abort();
70 | res.sendStatus(200);
71 | });
72 |
73 | export default router;
74 | export { globalVariables };
75 |
--------------------------------------------------------------------------------
/src/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "rootDir": ".",
4 | "module": "commonjs",
5 | "esModuleInterop": true,
6 | "target": "es6",
7 | "noImplicitAny": true,
8 | "strict": true,
9 | "moduleResolution": "node",
10 | "declaration": true,
11 | "sourceMap": false,
12 | "outDir": "../../dist/server",
13 | "baseUrl": ".",
14 | "paths": {
15 | "*": ["../../node_modules/*"]
16 | }
17 | },
18 | "include": ["./**/*"]
19 | }
20 |
--------------------------------------------------------------------------------
/src/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "rootDir": ".",
4 | "outDir": "../dist"
5 | },
6 | "files": [],
7 | "references": [{ "path": "./client" }, { "path": "./server" }, { "path": "./middleware" }]
8 | }
9 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "esModuleInterop": true,
4 | "noEmit": true
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/webpack.dev.config.ts:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import webpack from 'webpack';
3 | import HtmlWebpackPlugin from 'html-webpack-plugin';
4 | import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
5 | import ESLintPlugin from 'eslint-webpack-plugin';
6 |
7 | import { Configuration as WebpackConfiguration } from 'webpack';
8 | import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
9 |
10 | interface Configuration extends WebpackConfiguration {
11 | devServer?: WebpackDevServerConfiguration;
12 | }
13 |
14 | const config: Configuration = {
15 | mode: 'development',
16 | output: {
17 | publicPath: '/',
18 | },
19 | entry: './src/client/index.tsx',
20 | module: {
21 | rules: [
22 | {
23 | test: /\.(ts|js)x?$/i,
24 | exclude: [/node_modules/, __dirname + './splash'],
25 | use: {
26 | loader: 'babel-loader',
27 | options: {
28 | presets: [
29 | '@babel/preset-env',
30 | '@babel/preset-react',
31 | '@babel/preset-typescript',
32 | ],
33 | },
34 | },
35 | },
36 | {
37 | test: /\.(png|jp(e*)g|gif)$/,
38 | exclude: __dirname + './splash',
39 | use: [
40 | {
41 | loader: 'file-loader',
42 | },
43 | ],
44 | },
45 | {
46 | test: /\.svg$/,
47 | exclude: __dirname + './splash',
48 | use: ['babel-loader', '@svgr/webpack', 'file-loader'],
49 | },
50 | ],
51 | },
52 | resolve: {
53 | extensions: ['.tsx', '.ts', '.js'],
54 | },
55 | plugins: [
56 | new HtmlWebpackPlugin({
57 | template: './src/client/index.html',
58 | favicon: './src/client/img/favicon.svg',
59 | }),
60 | new webpack.HotModuleReplacementPlugin(),
61 | new ForkTsCheckerWebpackPlugin({
62 | async: false,
63 | typescript: {
64 | configFile: './src/client/tsconfig.json',
65 | },
66 | }),
67 | new ESLintPlugin({
68 | extensions: ['js', 'jsx', 'ts', 'tsx'],
69 | }),
70 | ],
71 | devtool: 'inline-source-map',
72 | devServer: {
73 | proxy: {
74 | '/api': 'http://localhost:15000',
75 | '/socket.io/': {
76 | target: 'http://localhost:15000',
77 | ws: true,
78 | },
79 | },
80 | contentBase: path.join(__dirname, 'build'),
81 | historyApiFallback: true,
82 | port: 8080,
83 | open: false,
84 | hot: true,
85 | },
86 | };
87 |
88 | export default config;
89 |
--------------------------------------------------------------------------------
/webpack.prod.config.ts:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import webpack from 'webpack';
3 | import HtmlWebpackPlugin from 'html-webpack-plugin';
4 | import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
5 | import ESLintPlugin from 'eslint-webpack-plugin';
6 | import { CleanWebpackPlugin } from 'clean-webpack-plugin';
7 |
8 | const config: webpack.Configuration = {
9 | mode: 'production',
10 | entry: './src/client/index.tsx',
11 | output: {
12 | path: path.resolve(
13 | __dirname,
14 | process.env.JAG === 'demo' ? 'splash/bundle/demo' : 'dist/client'
15 | ),
16 | filename: '[name].js',
17 | publicPath: '',
18 | },
19 | module: {
20 | rules: [
21 | {
22 | test: /\.(ts|js)x?$/i,
23 | exclude: [/node_modules/, __dirname + './splash'],
24 | use: {
25 | loader: 'babel-loader',
26 | options: {
27 | presets: [
28 | '@babel/preset-env',
29 | '@babel/preset-react',
30 | '@babel/preset-typescript',
31 | ],
32 | },
33 | },
34 | },
35 | {
36 | test: /\.(png|jp(e*)g|gif)$/,
37 | exclude: __dirname + './splash',
38 | use: [
39 | {
40 | loader: 'file-loader',
41 | },
42 | ],
43 | },
44 | {
45 | test: /\.svg$/,
46 | exclude: __dirname + './splash',
47 | use: ['babel-loader', '@svgr/webpack', 'file-loader'],
48 | },
49 | ],
50 | },
51 | resolve: {
52 | extensions: ['.tsx', '.ts', '.js'],
53 | },
54 | plugins: [
55 | new HtmlWebpackPlugin({
56 | template: 'src/client/index.html',
57 | favicon: './src/client/img/favicon.svg',
58 | }),
59 | new ForkTsCheckerWebpackPlugin({
60 | async: false,
61 | typescript: {
62 | configFile: './src/client/tsconfig.json',
63 | },
64 | }),
65 | new ESLintPlugin({
66 | extensions: ['js', 'jsx', 'ts', 'tsx'],
67 | }),
68 | new CleanWebpackPlugin(),
69 | new webpack.EnvironmentPlugin(['JAG']),
70 | ],
71 | };
72 |
73 | export default config;
74 |
--------------------------------------------------------------------------------