Skip to content

[Draft] Local Version Smart Test Route Map Update #406

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.

Sign up for GitHub

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

Closed
RaccoonLi wants to merge 1 commit into from
Closed

[Draft] Local Version Smart Test Route Map Update #406

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,13 @@
"@mui/icons-material": "^5.5.1",
"@mui/lab": "^5.0.0-alpha.72",
"@mui/material": "^5.4.4",
"@react-sigma/core": "^3.3.0",
"axios": "^0.21.4",
"bootstrap": "^4.5.3",
"copy-to-clipboard": "^3.3.2",
"file-loader": "^6.2.0",
"graphology": "^0.25.1",
"graphology-gexf": "^0.10.3",
"jquery": "^3.5.1",
"local-storage": "^2.0.0",
"prop-types": "^15.8.1",
Expand All @@ -53,7 +56,8 @@
"react-loading": "^2.0.3",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"recharts": "^2.0.9",
"react-select": "^5.2.2"
"react-select": "^5.2.2",
"react-sigma": "^1.2.35",
"recharts": "^2.0.9"
}
}
9 changes: 5 additions & 4 deletions react/src/component/TasksView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,9 +318,10 @@ class TasksView extends BaseView {
</Table>
</TableContainer>
<Dialog open={this.state.openTestDetail}
fullWidth
maxWidth="lg"
onClose={() => this.handleCloseDetailDialog()}>
fullWidth
maxWidth="lg"
onClose={() => this.handleCloseDetailDialog()}
>
<DialogContent>
<TestReportView testTask={this.state.testDetailInfo} />
</DialogContent>
Expand Down Expand Up @@ -772,7 +773,7 @@ class TasksView extends BaseView {
this.snackBarFail(res)
}
}).catch(this.snackBarError)

let queryParams = [
{
"key": "status",
Expand Down
79 changes: 72 additions & 7 deletions react/src/component/TestReportView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.

import React, {PureComponent} from 'react'
import React, {PureComponent, useEffect} from 'react'
import { Link } from "react-router-dom";
import cssObj from '@/css/style.scss'
import 'bootstrap/dist/css/bootstrap.css'
Expand All @@ -12,6 +12,14 @@ import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
import Button from "@mui/material/Button";
import axios from "@/axios";
import PerfTestDashboard from './PerfTestDashboard';
import { SigmaContainer, useLoadGraph } from "@react-sigma/core";
import Graph from "graphology";
import {parse} from "graphology-gexf";
import Container from "@mui/material/Container";
import Box from "@mui/material/Box";
import {EdgeShapes, Filter, LoadGEXF, NodeShapes, Sigma} from "react-sigma";
import Grid from "@material-ui/core/Grid";
import Stack from "@mui/material/Stack";

const COLORS = ['#00C49F', '#FF8042'];
const badgeList = ['primary', 'info', 'secondary', 'light'];
Expand Down Expand Up @@ -44,7 +52,10 @@ const PieCustomizedLabel = ({cx, cy, midAngle, innerRadius, outerRadius, percent
export default class TestReportView extends React.Component {
state = {
task: this.props.testTask,
history: null
history: null,
overNode: null,
clickNode: null,
selectedPath: []
};


Expand Down Expand Up @@ -130,6 +141,8 @@ export default class TestReportView extends React.Component {
chunkedSuccDeviceResult = _.chunk(dtrSuccFailMap['true'], 6)
}

let graph = parse(Graph, String(this.state.gexf))

return <div id='test_report'>
<div id='test_report_head'>
<table className='table table-borderless'>
Expand Down Expand Up @@ -194,7 +207,7 @@ export default class TestReportView extends React.Component {
{task.pipelineLink ?
<p className='mt-3'><a href={task.pipelineLink} rel="noopener noreferrer">Link to PipeLine</a></p> : null}
</td>
<td>
{task.runningType !== 'SMART' ? <td>
<h4>Overall success rate {task.overallSuccessRate} <span
className='badge badge-primary ml-2'
style={{fontSize: '1rem'}}>{task.totalTestCount - task.totalFailCount}/{task.totalTestCount}</span>
Expand Down Expand Up @@ -247,9 +260,8 @@ export default class TestReportView extends React.Component {
</tr>
</tbody>
</table>
</td>
</td>: null}
</tr>

</tbody>
</table>
</div>
Expand Down Expand Up @@ -396,7 +408,7 @@ export default class TestReportView extends React.Component {
</div> : null}
</div>
<div id='test_report_content_2'>
{chunkedSuccDeviceResult ? <div>
{chunkedSuccDeviceResult && task.runningType !== 'SMART' ? <div>
<table className='table table-borderless'>
<thead className="thead-info">
<tr className="table-info">
Expand Down Expand Up @@ -470,7 +482,49 @@ export default class TestReportView extends React.Component {
</tbody>
</table>
</div> : null}
</div>
</div>
<div id='test_report_content_4>'>
{task.runningType === 'SMART' ? <div>
<table className='table table-borderless'>
<thead className="thead-info">
<tr className="table-info">
<th style={{backgroundColor: '#2F5496', color: 'white'}}>
Route Map:
</th>
</tr>
</thead>
</table>
<Container maxWidth={false}>
<Stack direction="row">
<Box style={{width: '200px', height: '400px'}}>
{this.state.overNode ? <img style={{width: '180px', height: '400px'}} src={`route_map/${this.state.overNode}/${this.state.overNode}-0.jpg`} alt={this.state.overNode}/> : null}
</Box>
<Sigma renderer="canvas" style={{width: '1000px', height: '400px'}}
onOverNode={(e) => {this.setState({ overNode: e.data.node.label })}}
onClickNode={e => {
this.setState({ selectedPath: this.state.selectedPath.concat([e.data.node.label]), clickNode: e.data.node.label })
console.log(this.state.selectedPath)
}}
>
<EdgeShapes default="arrow"/>
<NodeShapes default="def"/>
<LoadGEXF path={"route_map/directed_acyclic_graph.gexf"} />
<Filter nodesBy={(node) => {
if (this.state.clickNode) {
return this.state.clickNode === node || graph.outNeighbors(this.state.clickNode).includes(node.label)
}
return true
}}/>
</Sigma>
</Stack>
<Stack direction="row">
<h5 className='mt-1' style={{ width: '1000px' }}>Selected Path: [ {this.state.selectedPath.join(' --> ')} ]</h5>
<Button variant="outlined" color="info" onClick={() => {this.setState({ selectedPath: [], clickNode: null })}}>Clear</Button>
<Button variant="outlined" color="info" onClick={() => {}}>Generate</Button>
</Stack>
</Container>
</div> : null}
</div>
</div>
}

Expand Down Expand Up @@ -532,11 +586,22 @@ export default class TestReportView extends React.Component {
}).catch(this.snackBarError)
}

loadGEXF() {
fetch("route_map/directed_acyclic_graph.gexf")
.then((res) => res.text())
.then((gexf) => {
this.setState({
gexf: gexf
})
})
}

componentDidMount() {
console.log("componentDidMount")
console.log(this.props.testTask)
this.queryTaskHistory()
console.log(this.state.history)
this.loadGEXF()
}

}
1 change: 1 addition & 0 deletions react/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ module.exports = env => {
new CopyPlugin({
patterns: [
{ from: path.join(__dirname, 'images'), to: path.join(__dirname, distPath + '/images') },
{ from: path.join(__dirname, 'route_map'), to: path.join(__dirname, distPath + '/route_map') },
],
}),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
Expand Down