Skip to content

Commit

Permalink
refactor with webpack and react
Browse files Browse the repository at this point in the history
Signed-off-by: SamYuan1990 <yy19902439@126.com>
  • Loading branch information
SamYuan1990 committed Nov 9, 2020
1 parent 6f7e532 commit 9d7ca52
Show file tree
Hide file tree
Showing 12 changed files with 4,867 additions and 218 deletions.
3 changes: 3 additions & 0 deletions .babelrc
@@ -0,0 +1,3 @@
{
"presets": ["@babel/preset-env","@babel/preset-react"]
}
5 changes: 5 additions & 0 deletions app.js
Expand Up @@ -6,6 +6,7 @@ const cookieParser = require('cookie-parser');
const ejs = require('ejs');

const indexRouter = require('./routes/index');
const resultRouter = require('./routes/result');
const apiRouter = require('./routes/api');

const app = express();
Expand All @@ -15,6 +16,8 @@ log4js.configure({
appenders: {app: {type: 'file', filename: 'logger.log'}},
categories: {default: {appenders: ['app'], level: 'debug'}}
});

const logger = log4js.getLogger('app');
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.engine('html', ejs.__express);
Expand All @@ -27,6 +30,7 @@ app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/result', resultRouter);
app.use('/api', apiRouter);

// catch 404 and forward to error handler
Expand All @@ -40,6 +44,7 @@ app.use(function(err, req, res, next) {
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
logger.error(err);
res.status(err.status || 500);
res.render('error');
});
Expand Down
5 changes: 2 additions & 3 deletions azure-pipelines.yml
Expand Up @@ -36,6 +36,5 @@ jobs:
displayName: downloadTape
- script: cp sample/prepareConfig.sh fabric-samples/test-network
displayName: cpPrepareConfig
- script: nohup npm run e2e
displayName: startProbe

- script: npm run e2e
displayName: startEnd2EndTest
4,816 changes: 4,643 additions & 173 deletions package-lock.json

Large diffs are not rendered by default.

18 changes: 16 additions & 2 deletions package.json
Expand Up @@ -8,7 +8,8 @@
"lint": "eslint --ext .js ./lib ./routes ./test ./e2e",
"test": "export NODE_ENV=test PORT=3300 && nyc mocha 'test/**/*.test.js' --timeout 5000 --exit",
"cover:report": "nyc report --reporter=lcov --reporter=text",
"e2e": "export NODE_ENV=test PORT=3000 && mocha 'e2e/**/*.test.js' --timeout 3600000 --exit"
"e2e": "export NODE_ENV=test PORT=3000 && mocha 'e2e/**/*.test.js' --timeout 3600000 --exit",
"build": "webpack"
},
"repository": {
"type": "git",
Expand All @@ -34,7 +35,20 @@
"log4js": "^6.3.0",
"morgan": "~1.9.1",
"pug": "^3.0.0",
"system-sleep": "^1.3.7"
"system-sleep": "^1.3.7",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-transition-group": "^4.3.0",
"express-rate-limit": "^5.1.3",
"express-slow-down": "^1.3.1",
"helmet": "^4.1.1",
"@babel/core": "^7.8.4",
"@babel/preset-env": "^7.8.4",
"@babel/preset-react": "^7.8.3",
"babel-loader": "^8.0.5",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11"
},
"devDependencies": {
"chai": "^4.2.0",
Expand Down
30 changes: 30 additions & 0 deletions public/javascripts/bundle.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion routes/api.js
Expand Up @@ -44,7 +44,7 @@ function prepareArray(input) {

router.get('/run', function(req, res, next) {
res.send('process start at ' + new Date().toString() + ' go to /result to see result');
fs.writeFileSync(lockFile, 123);
fs.writeFileSync(lockFile, '123');
fileIO.init();
logger.info(req.query);
const CmdInfo = {
Expand Down
4 changes: 0 additions & 4 deletions routes/index.js
Expand Up @@ -6,8 +6,4 @@ router.get('/', function(req, res, next) {
res.render('index');
});

router.get('/result', function(req, res, next) {
res.render('result');
});

module.exports = router;
8 changes: 8 additions & 0 deletions routes/result.js
@@ -0,0 +1,8 @@
const express = require('express');
const router = express.Router();

router.get('/', function(req, res, next) {
res.render('result');
});

module.exports = router;
136 changes: 136 additions & 0 deletions src/App.jsx
@@ -0,0 +1,136 @@
import React from 'react';
import ReactDOM from 'react-dom';

class InputForm extends React.Component {

constructor(props) {
super(props);
this.state = {
Path: './fabric-samples/test-network',
BatchTimeout: '1,2',
MaxMessageCount: '10',
AbsoluteMaxBytes: '2',
PreferredMaxBytes: '2',
CoolDown: '5',
PrepareCLI: './network.sh',
StartCLI: './network.sh',
CCDeployCLI: './network.sh',
TapeCount: '5000',
ShutDownCLI: './network.sh'
};
this.changePath = this.changePath.bind(this);
this.changeBatchTimeout = this.changeBatchTimeout.bind(this);
this.changeMaxMessageCount = this.changeMaxMessageCount.bind(this);
this.changeAbsoluteMaxBytes = this.changeAbsoluteMaxBytes.bind(this);
this.changePreferredMaxBytes = this.changePreferredMaxBytes.bind(this);
this.changeCoolDown = this.changeCoolDown.bind(this);
this.changePrepareCLI = this.changePrepareCLI.bind(this);
this.changeStartCLI = this.changeStartCLI.bind(this);
this.changeCCDeployCLI = this.changeCCDeployCLI.bind(this);
this.changeTapeCount = this.changeTapeCount.bind(this);
this.changeShutDownCLI = this.changeShutDownCLI.bind(this);
}

changePath(event){
this.setState({
Path: event.target.value? event.target.value:'./fabric-samples/test-network'
})
}

changeBatchTimeout(event){
this.setState({
BatchTimeout: event.target.value? event.target.value:'1,2'
})
}

changeMaxMessageCount(event){
this.setState({
MaxMessageCount: event.target.value? event.target.value:'10'
})
}

changeAbsoluteMaxBytes(event){
this.setState({
AbsoluteMaxBytes: event.target.value? event.target.value:'2'
})
}

changePreferredMaxBytes(event){
this.setState({
PreferredMaxBytes: event.target.value? event.target.value:'4'
})
}
changeCoolDown(event){
this.setState({
CoolDown: event.target.value? event.target.value:'5'
})
}

changePrepareCLI(event){
this.setState({
PrepareCLI: event.target.value? event.target.value:'./network.sh'
})
}
changeStartCLI(event){
this.setState({
StartCLI: event.target.value? event.target.value:'./network.sh'
})
}
changeCCDeployCLI(event){
this.setState({
CCDeployCLI: event.target.value? event.target.value:'./network.sh'
})
}
changeTapeCount(event){
this.setState({
TapeCount: event.target.value? event.target.value:'5000'
})
}
changeShutDownCLI(event){
this.setState({
ShutDownCLI: event.target.value? event.target.value:'./network.sh'
})
}

render () {
return (
<div class="pure-g">
<div class="pure-u-1-2 pure-u-md-1-2">
<p>Input</p>
<form action="./api/run">
Path: <input type="text" name="Path" placeholder="./fabric-samples/test-network" onChange={this.changePath} /><br/>
BatchTimeout: <input type="text" name="BatchTimeout" placeholder="1,2" onChange={this.changeBatchTimeout} /> <br/>
MaxMessageCount: <input type="text" name="MaxMessageCount" placeholder="10" onChange={this.changeMaxMessageCount} /><br/>
AbsoluteMaxBytes: <input type="text" name="AbsoluteMaxBytes" placeholder="2" onChange={this.changeAbsoluteMaxBytes}/><br/>
PreferredMaxBytes: <input type="text" name="PreferredMaxBytes" placeholder="4" onChange={this.changePreferredMaxBytes}/><br/>
CoolDown: <input type="text" name="CoolDown" placeholder="5" onChange={this.changeCoolDown}/><br/>
PrepareCLI: <input type="text" name="PrepareCLI" placeholder="./prepareConfig.sh" onChange={this.changePrepareCLI}/><br/>
StartCLI: <input type="text" name="StartCLI" placeholder="./network.sh" onChange={this.changeStartCLI}/><br/>
CCDeployCLI: <input type="text" name="CCDeployCLI" placeholder="./network.sh" onChange={this.changeCCDeployCLI}/><br/>
TapeCount: <input type="text" name="TapeCount" placeholder="5000" onChange={this.changeTapeCount}/><br/>
ShutDownCLI: <input type="text" name="ShutDownCLI" placeholder="./network.sh" onChange={this.changeShutDownCLI}/><br/>
<input type="submit" value="submit"/>
</form>
</div>
<div class="pure-u-1-2 pure-u-md-1-2">
<p>Sample base on placeholder</p>
<p>for BatchTimeout {this.state.BatchTimeout}</p>
<p>for MaxMessageCount {this.state.MaxMessageCount}</p>
<p>for AbsoluteMaxBytes {this.state.AbsoluteMaxBytes}</p>
<p>for PreferredMaxBytes {this.state.PreferredMaxBytess}</p>
<p>$probedir{this.state.Path}/{this.state.PrepareCLI} $BatchTimeout $MaxMessageCount $AbsoluteMaxBytes $PreferredMaxBytes</p>
<p>$probedir{this.state.Path}/{this.state.StartCLI} up createChannel -i 2.2</p>
<p>$probedir{this.state.Path}/{this.state.CCDeployCLI} deployCC -d $BatchTimeout</p>
<p>sleep {this.state.CoolDown}</p>
<p>docker run --name tape -e TAPE_LOGLEVEL=debug --network host -v $probedir:/config guoger/tape tape /config/config.yaml {this.state.TapeCount}</p>
<p>docker rm tape</p>
<p>$probedir{this.state.Path}/{this.state.ShutDownCLI} down</p>
<p>sleep {this.state.CoolDown}</p>
</div>
</div>
)
}
}

// Rendering the entire react application
ReactDOM.render(<InputForm/>, document.getElementById('root'));
38 changes: 3 additions & 35 deletions views/index/index.html
Expand Up @@ -11,40 +11,8 @@
<h1>
welcome, here is probe
</h1>
</div>
<div class="pure-g">
<div class="pure-u-1-2 pure-u-md-1-2">
<p>Input</p>
<form action="./api/run">
Path: <input type="text" name="Path" placeholder="./fabric-samples/test-network/"><br>
BatchTimeout: <input type="text" name="BatchTimeout" placeholder="1,2"><br>
MaxMessageCount: <input type="text" name="MaxMessageCount" placeholder="10"><br>
AbsoluteMaxBytes: <input type="text" name="AbsoluteMaxBytes" placeholder="2"><br>
PreferredMaxBytes: <input type="text" name="PreferredMaxBytes" placeholder="4"><br>
CoolDown: <input type="text" name="CoolDown" placeholder="5"><br>
PrepareCLI: <input type="text" name="PrepareCLI" placeholder="./prepareConfig.sh"><br>
StartCLI: <input type="text" name="StartCLI" placeholder="./network.sh"><br>
CCDeployCLI: <input type="text" name="CCDeployCLI" placeholder="./network.sh"><br>
TapeCount: <input type="text" name="TapeCount" placeholder="5000"><br>
ShutDownCLI: <input type="text" name="ShutDownCLI" placeholder="./network.sh"><br>
<input type="submit" value="submit">
</form>
</div>
<div class="pure-u-1-2 pure-u-md-1-2">
<p>Sample base on placeholder</p>
<p>for BatchTimeout 1,2</p>
<p>for MaxMessageCount 10</p>
<p>for AbsoluteMaxBytes 2</p>
<p>for PreferredMaxBytes 4</p>
<p>${probedir}./fabric-samples/test-network/prepareConfig.sh $BatchTimeout $MaxMessageCount $AbsoluteMaxBytes $PreferredMaxBytes</p>
<p>${probedir}./fabric-samples/test-network/network.sh up createChannel -i 2.2</p>
<p>${probedir}./fabric-samples/test-network/network.sh deployCC -d $BatchTimeout</p>
<p>sleep 5</p>
<p>docker run --name tape -e TAPE_LOGLEVEL=debug --network host -v ${probedir}:/config guoger/tape tape /config/config.yaml $TapeCount</p>
<p>docker rm tape</p>
<p>${probedir}./fabric-samples/test-network/network.sh down</p>
<p>sleep 5</p>
</div>
</div>
</div>
<div id="root"></div>
<script type="text/javascript" src="./javascripts/bundle.js"></script>
</body>
</html>
20 changes: 20 additions & 0 deletions webpack.config.js
@@ -0,0 +1,20 @@
module.exports = {
entry: __dirname + '/src/App.jsx',
mode: 'production',
output: {
path: __dirname + '/public/javascripts',
filename: 'bundle.js'
},
watch: true,
module: {
rules: [
{
test: /\.jsx$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
}
]
}
};

0 comments on commit 9d7ca52

Please sign in to comment.