Status Codes And Errors Distribution
- {this.barChart(aggregateReport.errorsBar, ['count'])}
+
Scenarios
@@ -177,8 +119,8 @@ class Report extends React.Component {
}
loadData = () => {
- const {getAggregateReport, report} = this.props;
- getAggregateReport(report.test_id, report.report_id);
+ const {getAggregateReports, report} = this.props;
+ getAggregateReports([{testId:report.test_id, reportId:report.report_id}]);
}
@@ -203,7 +145,7 @@ function mapStateToProps(state) {
}
const mapDispatchToProps = {
- getAggregateReport: Actions.getAggregateReport,
+ getAggregateReports: Actions.getAggregateReports,
createBenchmark: Actions.createBenchmark,
createBenchmarkSuccess: Actions.createBenchmarkSuccess,
};
@@ -211,10 +153,11 @@ const mapDispatchToProps = {
const SummeryTable = ({report = {}}) => {
return (
-
+
+ {report.score && }
);
}
diff --git a/ui/src/features/components/TestForm/collapsibleScenarioConfig.js b/ui/src/features/components/TestForm/collapsibleScenarioConfig.js
index 0669ca53d..93cb70ef1 100644
--- a/ui/src/features/components/TestForm/collapsibleScenarioConfig.js
+++ b/ui/src/features/components/TestForm/collapsibleScenarioConfig.js
@@ -37,12 +37,16 @@ export default class CollapsibleScenarioConfig extends React.Component {
{
evt.stopPropagation();
onDuplicateScenario()
- }} icon='fa-copy' tooltip='Duplicate scenario'/>,
- {
+ }} icon='fa-copy' tooltip='Duplicate scenario'/>
+ ]
+
+ if(onDeleteScenario){
+ sections.push( {
evt.stopPropagation();
onDeleteScenario()
- }} icon='fa-trash' tooltip='Delete scenario' borderLeft/>,
- ]
+ }} icon='fa-trash' tooltip='Delete scenario' borderLeft/>)
+ }
+
const {expanded} = this.state;
return ( {
diff --git a/ui/src/features/components/TestForm/dragableWrapper.js b/ui/src/features/components/TestForm/dragableWrapper.js
new file mode 100644
index 000000000..c6f7d27a1
--- /dev/null
+++ b/ui/src/features/components/TestForm/dragableWrapper.js
@@ -0,0 +1,112 @@
+import * as React from 'react'
+import {findDOMNode} from 'react-dom'
+import {
+ DragSource,
+ DropTarget,
+ ConnectDropTarget,
+ ConnectDragSource,
+ DropTargetMonitor,
+ DropTargetConnector,
+ DragSourceConnector,
+ DragSourceMonitor
+} from 'react-dnd'
+
+const style = {
+ border: '1px dashed gray',
+ padding: '0.5rem 1rem',
+ marginBottom: '.5rem',
+ backgroundColor: 'white',
+ cursor: 'move'
+}
+
+const cardSource = {
+ beginDrag(props) {
+ return {
+ id: props.id,
+ index: props.index
+ }
+ }
+};
+
+const cardTarget = {
+ hover(props, monitor, component) {
+ if (!component) {
+ return null
+ }
+ const dragIndex = monitor.getItem().index;
+ const hoverIndex = props.index;
+
+ // Don't replace items with themselves
+ if (dragIndex === hoverIndex) {
+ return
+ }
+
+ // Determine rectangle on screen
+ const hoverBoundingRect = (findDOMNode(component)).getBoundingClientRect();
+
+ // Get vertical middle
+ const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+
+ // Determine mouse position
+ const clientOffset = monitor.getClientOffset();
+
+ // Get pixels to the top
+ const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+
+ // Only perform the move when the mouse has crossed half of the items height
+ // When dragging downwards, only move when the cursor is below 50%
+ // When dragging upwards, only move when the cursor is above 50%
+
+ // Dragging downwards
+ if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+ return
+ }
+
+ // Dragging upwards
+ if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+ return
+ }
+
+ // Time to actually perform the action
+ props.move(dragIndex, hoverIndex)
+
+ // Note: we're mutating the monitor item here!
+ // Generally it's better to avoid mutations,
+ // but it's good here for the sake of performance
+ // to avoid expensive index searches.
+ monitor.getItem().index = hoverIndex
+ }
+};
+
+class Card extends React.Component {
+ render() {
+ const {
+ isDragging,
+ connectDragSource,
+ connectDropTarget,
+ children
+ } = this.props;
+ const opacity = isDragging ? 0 : 1;
+ return connectDragSource(
+ connectDropTarget({children}
)
+ )
+ }
+}
+
+export default DropTarget(
+ 'card',
+ cardTarget,
+ (connect) => ({
+ connectDropTarget: connect.dropTarget()
+ })
+)(
+ DragSource(
+ 'card',
+ cardSource,
+ (connect, monitor) => ({
+ connectDragSource: connect.dragSource(),
+ isDragging: monitor.isDragging()
+ })
+ )(Card))
+
+
diff --git a/ui/src/features/components/TestForm/index.js b/ui/src/features/components/TestForm/index.js
index 2aab52e98..b79c6b3a9 100644
--- a/ui/src/features/components/TestForm/index.js
+++ b/ui/src/features/components/TestForm/index.js
@@ -53,7 +53,7 @@ export class TestForm extends React.Component {
const {maxSupportedScenariosUi} = this.state;
const {cleanAllErrors} = this.props;
cleanAllErrors();
- if(maxSupportedScenariosUi){
+ if (maxSupportedScenariosUi) {
this.setState({maxSupportedScenariosUi: null})
}
@@ -92,6 +92,7 @@ export class TestForm extends React.Component {
const {createTestError, processorsError, closeDialog, processorsLoading, processorsList} = this.props;
const {name, description, baseUrl, processorId, editMode, maxSupportedScenariosUi} = this.state;
const error = createTestError || processorsError || maxSupportedScenariosUi;
+
return (
@@ -256,7 +257,13 @@ export class TestForm extends React.Component {
onDeleteScenario = () => {
const {scenarios, currentScenarioIndex} = this.state;
scenarios.splice(currentScenarioIndex, 1);
- this.setState({scenarios, currentScenarioIndex: currentScenarioIndex - 1});
+ let newCurrentScenarioIndex;
+ if(currentScenarioIndex===0){
+ newCurrentScenarioIndex=0;
+ }else{
+ newCurrentScenarioIndex =currentScenarioIndex-1;
+ }
+ this.setState({scenarios, currentScenarioIndex: newCurrentScenarioIndex});
};
onDuplicateScenario = () => {
@@ -278,7 +285,19 @@ export class TestForm extends React.Component {
}
return steps;
};
-
+ updateStepOrder = (dragIndex, hoverIndex) => {
+ const {scenarios, currentScenarioIndex, before} = this.state;
+ let steps;
+ if (currentScenarioIndex === null) {
+ steps = before.steps;
+ } else {
+ steps = scenarios[currentScenarioIndex].steps;
+ }
+ const step = steps[dragIndex];
+ steps.splice(dragIndex, 1);
+ steps.splice(hoverIndex, 0, step);
+ this.setState({scenarios, before});
+ };
calcMaxAllowedWeight = (index) => {
const {scenarios, currentScenarioIndex} = this.state;
const exceptIndex = index || currentScenarioIndex;
@@ -318,7 +337,8 @@ export class TestForm extends React.Component {
+Add Step
+Add Before
-
this.onChooseScenario(key)} activeTabKey={activeTabKey} className={style.tabs}>
+ this.onChooseScenario(key)} activeTabKey={activeTabKey}
+ className={style.tabs}>
{
tabsData.map((tabData, index) => {
return (
@@ -339,7 +359,7 @@ export class TestForm extends React.Component {
scenario={tabData}
onChangeValueOfScenario={this.onChangeValueOfScenario}
processorsExportedFunctions={processorsExportedFunctions}
- onDeleteScenario={this.onDeleteScenario}
+ onDeleteScenario={scenarios.length === 1 ? undefined : this.onDeleteScenario}
onDuplicateScenario={this.onDuplicateScenario}
/>
@@ -351,6 +371,7 @@ export class TestForm extends React.Component {
processorsExportedFunctions={processorsExportedFunctions}
onDeleteStep={this.onDeleteStep}
onDuplicateStep={this.onDuplicateStep}
+ updateStepOrder={this.updateStepOrder}
/>
diff --git a/ui/src/features/components/TestForm/stepsList.js b/ui/src/features/components/TestForm/stepsList.js
index 45a15e13d..4c3366df5 100644
--- a/ui/src/features/components/TestForm/stepsList.js
+++ b/ui/src/features/components/TestForm/stepsList.js
@@ -1,6 +1,6 @@
import React from 'react';
import CollapsibleStep from './collapsibleStep';
-
+import DragableWrapper from './dragableWrapper'
export default class StepsList extends React.Component {
constructor(props) {
super(props);
@@ -16,6 +16,7 @@ export default class StepsList extends React.Component {
afterStepProcessorValue,
onDeleteStep,
onDuplicateStep,
+ updateStepOrder,
} = this.props;
return ( {
return (
+
+
)
})
diff --git a/ui/src/features/configurationColumn.js b/ui/src/features/configurationColumn.js
index eeb266308..25fa3f844 100644
--- a/ui/src/features/configurationColumn.js
+++ b/ui/src/features/configurationColumn.js
@@ -1,6 +1,7 @@
import {TableHeader} from "../components/ReactTable";
import React, {useEffect, useState} from "react";
import {get} from 'lodash';
+import Checkbox from '../components/Checkbox/Checkbox';
import Moment from 'moment';
import prettySeconds from 'pretty-seconds';
@@ -23,21 +24,35 @@ import TooltipWrapper from '../components/TooltipWrapper';
import {getTimeFromCronExpr} from './utils';
import UiSwitcher from '../components/UiSwitcher';
import TextArea from "../components/TextArea";
-import TitleInput from "../components/TitleInput";
import ClickOutHandler from 'react-onclickout'
-
-export const getColumns = ({columnsNames, sortHeader = '', onSort, onReportView, onRawView, onStop, onDelete, onEdit, onRunTest, onEnableDisable, onEditNote}) => {
+const iconsWidth = 50;
+const mediumSize = 60;
+const semiLarge = 70;
+const largeSize = 85;
+const extraLargeSize = 100;
+const extraExLargeSize = 120;
+export const getColumns = ({columnsNames, sortHeader = '', onSort, onReportView, onRawView, onStop, onDelete, onEdit, onRunTest, onEnableDisable, onEditNote, selectedReports, onReportSelected}) => {
const columns = [
{
+ id: 'compare',
+ Header: () => (
+
+ Select
+
+ ),
+ accessor: (data) =>
,
+ width: iconsWidth
+ }, {
id: 'report_id',
Header: () => (
Test Name
),
- accessor: 'report_id'
+ accessor: 'report_id',
},
{
id: 'name',
@@ -47,8 +62,6 @@ export const getColumns = ({columnsNames, sortHeader = '', onSort, onReportView,
),
accessor: 'name',
- headerClassName: css['header-name'],
- className: css['header-name']
}, {
id: 'processor_name',
Header: () => (
@@ -57,8 +70,6 @@ export const getColumns = ({columnsNames, sortHeader = '', onSort, onReportView,
),
accessor: 'name',
- headerClassName: css['header-name'],
- className: css['header-name']
},
{
id: 'description',
@@ -67,7 +78,8 @@ export const getColumns = ({columnsNames, sortHeader = '', onSort, onReportView,
Description
),
- accessor: 'description'
+ accessor: 'description',
+ className: css['center-flex'],
}, {
id: 'updated_at',
Header: () => (
@@ -81,7 +93,9 @@ export const getColumns = ({columnsNames, sortHeader = '', onSort, onReportView,
Modified
),
- accessor: (data) => (dateFormatter(data.updated_at))
+ accessor: (data) => (dateFormatter(data.updated_at)),
+ width: extraExLargeSize + 20,
+ className: css['center-flex'],
}, {
id: 'type',
Header: () => (
@@ -90,8 +104,8 @@ export const getColumns = ({columnsNames, sortHeader = '', onSort, onReportView,
),
accessor: 'type',
- className: css['small-header'],
- headerClassName: css['small-header']
+ width: iconsWidth,
+ className: css['center-flex'],
}, {
id: 'edit',
Header: () => (
@@ -116,8 +130,8 @@ export const getColumns = ({columnsNames, sortHeader = '', onSort, onReportView,
N/A