Skip to content

Commit

Permalink
Big create test (#362)
Browse files Browse the repository at this point in the history 
* fix(graphs): disable connected dots in status code graph
* feat(ui): utilize better the screen for creating or editing a test
  • Loading branch information
@manorlh
manorlh committed Sep 1, 2020
1 parent 39f3bfb commit c7813ca
Show file tree
Hide file tree
Showing 11 changed files with 84 additions and 53 deletions.
12 changes: 6 additions & 6 deletions ui/src/components/TitleInput/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ import PropTypes from 'prop-types'
import classnames from 'classnames'
import css from './TitleInput.scss'

const ParentWrap = ({wrap, children}) => {
const ParentWrap = ({wrap,style, children}) => {
if (wrap) {
return (
<div className={css.title_wrapper}>
<div style={style} className={css.title_wrapper}>
{children}
</div>
)
Expand All @@ -19,11 +19,11 @@ const ParentWrap = ({wrap, children}) => {
}
}

const TitleInput = ({title, disabled, className, children, prefix, suffix, alert,rightComponent, ...rest}) => {
const TitleInput = ({title, style,width, disabled, className, children, prefix, suffix, alert, rightComponent, ...rest}) => {
const childrenExist = Boolean(children)
return (
<ParentWrap wrap={childrenExist}>
<div style={{display: 'flex', flexDirection: 'row', justifyContent: !title ? 'flex-end' : 'space-between'}}>
<ParentWrap style={style} wrap={childrenExist}>
<div style={{display: 'flex', flexDirection: 'row', justifyContent: !title ? 'flex-end' : 'space-between',width}}>
<label {...rest} className={classnames(className, css.title, {
[css['title--disabled']]: disabled,
[css['title--alert']]: alert
Expand All @@ -34,7 +34,7 @@ const TitleInput = ({title, disabled, className, children, prefix, suffix, alert
</label>
{rightComponent}
</div>
{children ? <div>{children}</div> : undefined}
{children ? <div style={{width}}>{children}</div> : undefined}
</ParentWrap>
)
}
Expand Down
4 changes: 2 additions & 2 deletions ui/src/features/components/Modal/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,10 @@ class Modal extends React.Component {


render() {
const {children, width, height, style: customStyle} = this.props;
const {children, width, height, style: customStyle, maxWidth} = this.props;
return (
<div style={customStyle} className={style['modal']}>
<div className={style['modal-content']} style={{width: width, height}}>
<div className={style['modal-content']} style={{width: width, maxWidth, height}}>
<div className={style['icon-wrapper']}>
<FontAwesomeIcon className={style["exit-icon"]} onClick={this.onEscape} icon={faTimes}/>
</div>
Expand Down
8 changes: 4 additions & 4 deletions ui/src/features/components/Report/Charts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ const filterKeysFromArrayOfObject = (data, graphType, filteredKeys) => {
return filteredData;
};

export const BarChartPredator = ({data = [], keys=[], graphType, onSelectedGraphPropertyFilter, filteredKeys}) => {
export const BarChartPredator = ({data = [], keys = [], graphType, onSelectedGraphPropertyFilter, filteredKeys}) => {
const filteredData = filterKeysFromArrayOfObject(data, graphType, filteredKeys);

return (
Expand Down Expand Up @@ -98,7 +98,7 @@ export const BarChartPredator = ({data = [], keys=[], graphType, onSelectedGraph
)
};

export const LineChartPredator = ({data = [], keys = [], labelY, graphType, onSelectedGraphPropertyFilter, filteredKeys}) => {
export const LineChartPredator = ({data = [], keys = [], labelY, graphType, onSelectedGraphPropertyFilter, filteredKeys, connectNulls = true}) => {
const filteredData = filterKeysFromArrayOfObject(data, graphType, filteredKeys);
return (
<ResponsiveContainer width="100%" height={300}>
Expand All @@ -123,7 +123,7 @@ export const LineChartPredator = ({data = [], keys = [], labelY, graphType, onSe
{
keys.map((key, index) => {
const color = getColor(key, index);
return (<Line connectNulls key={index} type="monotone" dataKey={key} dot={null}
return (<Line connectNulls={connectNulls} key={index} type="monotone" dataKey={key} dot={null}
stroke={color.stroke}/>)
})
}
Expand Down Expand Up @@ -153,7 +153,7 @@ const renderLegend = (props) => {
style={{margin: '5px', display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
<Checkbox
indeterminate={false}
checked={_.get(filteredKeys,`${graphType}.${entry.value}`) === undefined || _.get(filteredKeys,`${graphType}.${entry.value}`) === false}
checked={_.get(filteredKeys, `${graphType}.${entry.value}`) === undefined || _.get(filteredKeys, `${graphType}.${entry.value}`) === false}
// disabled={}
onChange={(value) => {
onSelectedGraphPropertyFilter(graphType, entry.value, value)
Expand Down
1 change: 1 addition & 0 deletions ui/src/features/components/Report/compareReports.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ class CompareReports extends React.Component {
<h3>Status Codes</h3>
<LineChartPredator data={mergedReports.errorsCodeGraph} keys={mergedReports.errorsCodeGraphKeys}
graphType={'status_codes'}
connectNulls={false}
onSelectedGraphPropertyFilter={this.onSelectedGraphPropertyFilter}
filteredKeys={filteredKeys}/>
<h3>RPS</h3>
Expand Down
1 change: 1 addition & 0 deletions ui/src/features/components/Report/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ class Report extends React.Component {
<h3>Status Codes</h3>
<LineChartPredator data={aggregateReport.errorsCodeGraph} keys={aggregateReport.errorsCodeGraphKeys}
graphType={'status_codes'}
connectNulls={false}
onSelectedGraphPropertyFilter={this.onSelectedGraphPropertyFilter}
filteredKeys={filteredKeys}/>
<h3>RPS</h3>
Expand Down
97 changes: 62 additions & 35 deletions ui/src/features/components/TestForm/StepForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,12 @@ import ProcessorsDropDown from './ProcessorsDropDown';
import style from './stepform.scss';
import Input from "../../../components/Input";
import TitleInput from "../../../components/TitleInput";
import Button from "../../../components/Button";
import Dropdown from "../../../components/Dropdown/Dropdown.export";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {
faPlus,
faMinus
} from '@fortawesome/free-solid-svg-icons'

export default (props) => {
const sampleObject = {};
Expand All @@ -29,12 +33,24 @@ export default (props) => {
step.headers.push({});
onChangeValue(step, props.index);
};
const onDeleteHeader = (index) => {
const {onChangeValue} = props;
const step = cloneDeep(props.step);
step.headers.splice(index, 1);
onChangeValue(step, props.index);
};
const onAddCapture = () => {
const {onChangeValue} = props;
const step = cloneDeep(props.step);
step.captures.push({});
onChangeValue(step, props.index);
};
const onDeleteCapture = (index) => {
const {onChangeValue} = props;
const step = cloneDeep(props.step);
step.captures.splice(index, 1);
onChangeValue(step, props.index);
};
const onCaptureChange = (key, value, index) => {
const {onChangeValue} = props;
const step = cloneDeep(props.step);
Expand Down Expand Up @@ -69,18 +85,28 @@ export default (props) => {
return (
<div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
<div className={style['http-methods-request-options-wrapper']}>
<RectangleAlignChildrenLeft className={style['rectangle-http-methods']}>
<TitleInput title={'Method'}>
<RectangleAlignChildrenLeft className={style['rectangle-url-row']}>
<TitleInput style={{flex: 0, marginRight: '10px'}} width={'120px'} title={'Method'}>
<HttpMethodDropdown
value={step.method}
onChange={(value) => onInputChange('method', value)}
/>
</TitleInput>
<TitleInput style={{width: '100%'}} title={'Enter Url'}>
<TitleInput style={{marginRight: '10px', flexGrow: 2}} title={'Url'}>
<Input value={step.url} onChange={(evt) => {
onInputChange('url', evt.target.value)
}}/>
</TitleInput>
<TitleInput style={{marginRight: '10px'}} title={'Before Request'}>
<ProcessorsDropDown options={processorsExportedFunctions}
onChange={(value) => onInputChange('beforeRequest', value)}
value={step.beforeRequest}/>
</TitleInput>
<TitleInput title={'After Response'}>
<ProcessorsDropDown options={processorsExportedFunctions}
onChange={(value) => onInputChange('afterResponse', value)}
value={step.afterResponse}/>
</TitleInput>
<RequestOptions
onGzipToggleChanged={(value) => onInputChange('gzip', value)}
onForeverToggleChanged={(value) => onInputChange('forever', value)}
Expand All @@ -92,36 +118,25 @@ export default (props) => {

</div>
<RectangleAlignChildrenLeft/>
<Header text={'Headers'}/>
<DynamicKeyValueInput value={step.headers} onChange={onHeaderChange}/>
<Button style={{width: '100px', minWidth: '0', marginBottom: '40px'}} inverted
onClick={onAddHeader}>+Add</Button>
<Header text={'Captures'}/>
<DynamicKeyValueInput value={step.captures} onChange={onCaptureChange}
keyHintText={'$.id'} valueHintText={'id'}/>
<Button style={{width: '100px', minWidth: '0', marginBottom: '40px'}} inverted
onClick={onAddCapture}>+Add</Button>
<Header text={'Processors'}/>
<div style={{
display: 'flex',
flexDirection: 'row',
width: '100%',
alignItems: 'center',
marginBottom: '40px'
}}>
<TitleInput title={'Before Request'}>
<ProcessorsDropDown options={processorsExportedFunctions}
onChange={(value) => onInputChange('beforeRequest', value)}
value={step.beforeRequest}/>
</TitleInput>
<TitleInput title={'After Response'}>
<ProcessorsDropDown options={processorsExportedFunctions}
onChange={(value) => onInputChange('afterResponse', value)}
value={step.afterResponse}/>
</TitleInput>
<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly'}}>
<div>
<Header text={'Headers'}/>
<DynamicKeyValueInput value={step.headers} onAdd={onAddHeader} onDelete={onDeleteHeader}
onChange={onHeaderChange}/>
</div>
<div>
<Header text={'Captures'}/>
<DynamicKeyValueInput value={step.captures} onChange={onCaptureChange} onAdd={onAddCapture}
onDelete={onDeleteCapture} keyHintText={'$.id'} valueHintText={'id'}/>

</div>
</div>
<Header text={'Body'}/>
<JSONInput
style={{
outerBox: {height: null, 'min-height': '200px'},
container: {height: null, border: '1px solid #557EFF', 'min-height': '200px'}
}}
key={jsonObjectKey}
id='a_unique_id'
placeholder={step.body || (disableSampleBody ? undefined : sampleObject)}
Expand All @@ -132,7 +147,6 @@ export default (props) => {
keys: 'blue'
}}
locale={locale}
height={'200px'}
width={'100%'}
onChange={onBodyChange}
/>
Expand All @@ -141,7 +155,7 @@ export default (props) => {
)
}

const DynamicKeyValueInput = ({value, onChange, keyHintText, valueHintText}) => {
const DynamicKeyValueInput = ({value, onChange, onAdd, onDelete, keyHintText, valueHintText}) => {
const headersList = value
.map((header, index) => {
return (
Expand All @@ -150,20 +164,33 @@ const DynamicKeyValueInput = ({value, onChange, keyHintText, valueHintText}) =>
flexDirection: 'row',
width: '100%',
marginBottom: index !== headersList - 1 ? '5px' : undefined
}} key={index}>
}} key={`${index}.${header.key}.${header.value}`}>
<Input style={{marginRight: '10px'}} value={header.key} onChange={(evt) => {
onChange('key', evt.target.value, index)
}} placeholder={keyHintText || 'key'}/>

<Input value={header.value} onChange={(evt) => {
onChange('value', evt.target.value, index)
}} placeholder={valueHintText || 'value'}/>

{
value.length - 1 === index &&
<FontAwesomeIcon
style={{alignSelf: 'center', color: '#557EFF', cursor: 'pointer', marginLeft: '10px'}}
onClick={() => onAdd(index)}
icon={faPlus}/>
||
(index < value.length - 1 && <FontAwesomeIcon
style={{alignSelf: 'center', color: '#557EFF', cursor: 'pointer', marginLeft: '10px'}}
onClick={() => onDelete(index)}
icon={faMinus}/>)
}
</div>
)
});

return (
<div style={{display: 'flex', flexDirection: 'column', width: '100%', marginBottom: '22px'}}>
<div style={{display: 'flex', flexDirection: 'column', width: '100%', marginBottom: '10px'}}>
{headersList}
</div>
)
Expand Down
2 changes: 1 addition & 1 deletion ui/src/features/components/TestForm/collapsibleScenarioConfig.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default class CollapsibleScenarioConfig extends React.Component {
constructor(props) {
super(props);
this.state = {
expanded: true
expanded: false
}
}

Expand Down
2 changes: 1 addition & 1 deletion ui/src/features/components/TestForm/collapsibleStep.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default class CollapsibleStep extends React.Component {
constructor(props) {
super(props);
this.state = {
expanded: false
expanded: true
}
}

Expand Down
3 changes: 2 additions & 1 deletion ui/src/features/components/TestForm/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,8 @@ export class TestForm extends React.Component {
const {name, description, baseUrl, processorId, editMode, maxSupportedScenariosUi} = this.state;
const error = createTestError || processorsError || maxSupportedScenariosUi;
return (
<Modal style={{paddingTop: '65px'}} height={'93%'} onExit={closeDialog}>
<Modal style={{paddingTop: '12px', paddingBottom: '12px', paddingLeft: '40px', paddingRight: '40px'}}
height={'100%'} width={'100%'} maxWidth={'1440px'} onExit={closeDialog}>
<FormWrapper title={`${editMode && 'Edit' || 'Create'} Test`}>
<div className={style['top']}>
<div className={style['top-inputs']}>
Expand Down
4 changes: 2 additions & 2 deletions ui/src/features/components/TestForm/stepform.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
flex-direction: row;
justify-content: space-between;
}
.rectangle-http-methods {
.rectangle-url-row {
width:100%;
margin-bottom: 22px;
margin-bottom: 10px;
}
3 changes: 2 additions & 1 deletion ui/src/features/components/TestForm/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
}

.top {
padding: 10px 12px;
padding-right: 12px;
padding-left: 12px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
Expand Down

0 comments on commit c7813ca

Please sign in to comment.