Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Chaos experiments ui page #636

Merged
merged 8 commits into from
Sep 27, 2023
48 changes: 29 additions & 19 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
"request": "^2.88.2",
"request-promise-native": "^1.0.8",
"semver": "^7.3.2",
"sequelize": "^5.22.3",
"sequelize": "^5.22.5",
"slack-emojis": "^1.1.1",
"sqlite3": "^5.1.6",
"tedious": "^9.2.2",
Expand Down
2 changes: 1 addition & 1 deletion tests/configurations/dockerRun.sh
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ function mysql() {
IMAGE_NAME=mysql:5.7
APP=mysql
stop $APP
COMMAND="docker run \
COMMAND="docker run --platform linux/amd64\
-d \
--name mysql \
-p 3306:3306 \
Expand Down
84 changes: 44 additions & 40 deletions ui/src/App/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { Fragment } from 'react';
import GetTests from '../features/get-tests';
import GetProcessors from '../features/get-processors';
import GetChaosExperiments from '../features/get-chaos-experiments';
import GetJobs from '../features/get-jobs';
import GetReports from '../features/get-last-reports';
import GetTestReports from '../features/get-test-reports';
Expand Down Expand Up @@ -29,53 +30,56 @@ class App extends React.Component {

render () {
return (
<ConnectedRouter history={history}>
<DrawerE history={history} open={true} listItemData={menuList}>
<Route exact path='/' render={() => (
<Redirect to='/last_reports' />
)} />
<Route exact path='/tests' render={props => (
<GetTests {...props} />
)} />
<Route exact path='/tests/:testId/run' render={props => (
<GetTests {...props} />
)} />
<Route exact path='/tests/:testId/edit' render={props => (
<GetTests {...props} />
)} />
<Route exact path='/jobs' render={props => (
<GetJobs {...props} />
)} />
<Route exact path='/jobs/:jobId/edit' render={props => (
<GetJobs {...props} />
)} />
<Route exact path='/tests/:testId/reports' render={props => (
<GetTestReports {...props} />
)} />
<Route exact path='/last_reports' render={props => (
<GetReports {...props} />
)} />
<Route exact path='/processors' render={props => (
<GetProcessors {...props} />
)} />
<Route exact path='/webhooks' render={props => (
<Webhooks {...props} />
)} />
<ConnectedRouter history={history}>
<DrawerE history={history} open listItemData={menuList}>
<Route exact path='/' render={() => (
<Redirect to='/last_reports' />
)} />
<Route exact path='/tests' render={props => (
<GetTests {...props} />
)} />
<Route exact path='/tests/:testId/run' render={props => (
<GetTests {...props} />
)} />
<Route exact path='/tests/:testId/edit' render={props => (
<GetTests {...props} />
)} />
<Route exact path='/jobs' render={props => (
<GetJobs {...props} />
)} />
<Route exact path='/jobs/:jobId/edit' render={props => (
<GetJobs {...props} />
)} />
<Route exact path='/tests/:testId/reports' render={props => (
<GetTestReports {...props} />
)} />
<Route exact path='/last_reports' render={props => (
<GetReports {...props} />
)} />
<Route exact path='/processors' render={props => (
<GetProcessors {...props} />
)} />
<Route exact path='/chaos_experiments' render={props => (
<GetChaosExperiments {...props} />
)} />
<Route exact path='/webhooks' render={props => (
<Webhooks {...props} />
)} />
<Route exact path='/settings' render={props => (
<Configuration {...props} />
)} />
<Route exact path='/tests/:testId/reports/:reportId' render={props => (
<ReportPage {...props} />
)} />
</DrawerE>
</ConnectedRouter>
<Configuration {...props} />
)} />
<Route exact path='/tests/:testId/reports/:reportId' render={props => (
<ReportPage {...props} />
)} />
</DrawerE>
</ConnectedRouter>
)
}
}

function mapStateToProps (state) {
return {
location: get(state, 'router.location.pathname')
location: get(state, 'router.location.pathname')
}
}

Expand Down
2 changes: 2 additions & 0 deletions ui/src/App/rootSagas.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { all } from 'redux-saga/effects';
import { testsRegister } from '../features/redux/saga/testsSagas';
import { processorsRegister } from '../features/redux/saga/processorsSagas';
import { chaosExperimentsRegister } from '../features/redux/saga/chaosExperimentsSagas';
import { reportsRegister } from '../features/redux/saga/reportsSagas';
import { jobsRegister } from '../features/redux/saga/jobsSagas';
import { configRegister } from '../features/redux/saga/configSagas';
Expand All @@ -9,6 +10,7 @@ import { webhooksRegister } from '../features/redux/saga/webhooksSagas';
export default function * rootSaga () {
yield all([
processorsRegister(),
chaosExperimentsRegister(),
testsRegister(),
reportsRegister(),
jobsRegister(),
Expand Down
23 changes: 23 additions & 0 deletions ui/src/components/Dropdown/CustomDropdown.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import Dropdown from './Dropdown.export';
import React from 'react';

const CustomDropdown = (props) => {
const { list, width, onChange, value, placeHolder, style } = props;
return (
<Dropdown
width={width}
style={style}
options={list.map((option) => ({ key: option, value: option }))}
selectedOption={{ key: value, value: value }}
onChange={(selected) => {
onChange(selected.value)
}}
placeholder={placeHolder}
height={'35px'}
disabled={false}
validationErrorText=''
enableFilter={false}
/>
)
}
export default CustomDropdown;
2 changes: 1 addition & 1 deletion ui/src/components/ErrorWrapper/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const ErrorWrapper = (props) => {
const hasError = !!errorText
return (
<span className={style['error-wrapper']}>
{React.cloneElement(children, { error: hasError })}
{React.cloneElement(children)}
{hasError && (
<div data-test='input-error' className={style['error-text']}>
{errorText}
Expand Down
Loading