From cc145fff14440e573679e45c9f9dab68aa9f4605 Mon Sep 17 00:00:00 2001 From: Cezary Piatek Date: Fri, 29 Dec 2023 18:04:31 +0100 Subject: [PATCH] Add filters for scenario result type in scenario browser --- src/NScenario/report-browser-template.html | 8 ++--- src/nscenario-report-browser/src/App.tsx | 42 +++++++++++++--------- src/nscenario-report-browser/src/index.css | 20 ++++++++++- 3 files changed, 49 insertions(+), 21 deletions(-) diff --git a/src/NScenario/report-browser-template.html b/src/NScenario/report-browser-template.html index 38c2994..b51d9cf 100644 --- a/src/NScenario/report-browser-template.html +++ b/src/NScenario/report-browser-template.html @@ -1,4 +1,4 @@ -NScenario - Test Scenarios
+NScenario - Test Scenarios
diff --git a/src/nscenario-report-browser/src/App.tsx b/src/nscenario-report-browser/src/App.tsx index 42fa791..4e4c7dd 100644 --- a/src/nscenario-report-browser/src/App.tsx +++ b/src/nscenario-report-browser/src/App.tsx @@ -1,10 +1,10 @@ -import React, {createContext, useContext, useEffect, useState} from 'react'; +import React, {useContext, useEffect, useState} from 'react'; import './App.css'; //import data from "./scenarios.json" import DirectoryTree from 'antd/es/tree/DirectoryTree'; import { DataNode } from 'antd/es/tree'; -import { Card, Col, Row, Space, Statistic, Timeline} from "antd"; +import { Card, Col, Row, Statistic, Timeline} from "antd"; import { CheckCircleOutlined, @@ -108,15 +108,27 @@ function findLongestCommonPrefix(strings: string[]): string { return prefix; } +enum TestResultType{ + All, + Success, + Failed +} + +export function StatisticsCtr(props: {scenarios:Scenario[], onSetFilter: (type:TestResultType) => void }) { + var success = props.scenarios.filter(value => value.Status === 0).length; + var failed = props.scenarios.filter(value => value.Status === 1).length; + const [typeState, setTypeState] = useState(TestResultType.All) + const setFilter = (type:TestResultType) => { + type = typeState === type? TestResultType.All: type; + props.onSetFilter(type); + setTypeState(type); + }; -export function StatisticsCtr(props: {scenarios:Scenario[]}) { - var success = props.scenarios.filter(value => value.Status === 0).length - var failed = props.scenarios.filter(value => value.Status === 1).length return ( - + - + setFilter(TestResultType.All)} className={typeState === TestResultType.All ? "selected-filter":""}> - + setFilter(TestResultType.Success)} className={typeState === TestResultType.Success ? "selected-filter":""}> - + setFilter(TestResultType.Failed)} className={typeState === TestResultType.Failed ? "selected-filter":""}> { return ( - )} style={{width:"auto", border: props.isSelected? "1px solid blue": "1px solid transparent", transition: "border-color 0.5s ease" }}> + )} style={{width:"100%", border: props.isSelected? "1px solid blue": "1px solid transparent", transition: "border-color 0.5s ease", marginBottom: "20px" }}> { @@ -265,7 +277,7 @@ function App() { }); return ( -
+
@@ -280,12 +292,10 @@ function App() { - + { setTypeState(type) }} /> - - {scenarioState.map(value => )} - + {scenarioState.map(value => )} diff --git a/src/nscenario-report-browser/src/index.css b/src/nscenario-report-browser/src/index.css index af357d8..d76defd 100644 --- a/src/nscenario-report-browser/src/index.css +++ b/src/nscenario-report-browser/src/index.css @@ -14,4 +14,22 @@ code { .ant-timeline-item { padding-bottom: 5px!important; -} \ No newline at end of file +} + +.filter-row .ant-card +{ + cursor: pointer; +} +.filter-row .ant-card.selected-filter +{ + border: 1px solid blue; +} + +.App.filter-1 .scenario-1 +{ + display: none; +} +.App.filter-2 .scenario-0 +{ + display: none; +}