Skip to content
Snippets Groups Projects
Unverified Commit 0b19469c authored by Martyn Janes's avatar Martyn Janes
Browse files

Package updates

parent 75d85e95
Branches
Tags
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 116 additions and 7533 deletions
plugins/analysis/dashboard/frontend/package.json
+ 17
− 32
View file @ 0b19469c
...@@ -17,54 +17,39 @@ ...@@ -17,54 +17,39 @@
"@types/glob": "^7.1.1", "@types/glob": "^7.1.1",
"@types/react": "^16.7.20", "@types/react": "^16.7.20",
"@types/react-dom": "^16.0.11", "@types/react-dom": "^16.0.11",
"@types/react-router": "^4.4.3", "@types/react-router": "^5.1.7",
"@types/webpack": "^4.4.23", "@types/webpack": "^4.4.23",
"babel-loader": "^8.0.5", "babel-loader": "^8.0.5",
"css-loader": "^2.1.0", "css-loader": "^3.6.0",
"file-loader": "^3.0.1", "file-loader": "^6.0.0",
"html-loader": "^1.0.0-alpha.0", "html-loader": "^1.0.0-alpha.0",
"html-webpack-plugin": "^3.2.0", "html-webpack-plugin": "^4.3.0",
"mini-css-extract-plugin": "^0.5.0", "node-sass": "^4.14.1",
"mobx-react-devtools": "^6.0.3", "prettier": "^2.0.5",
"postcss": "^7.0.13", "react-hot-loader": "^4.12.21",
"postcss-browser-reporter": "^0.5.0", "sass": "^1.26.8",
"postcss-import": "^12.0.1", "sass-lint": "^1.13.1",
"postcss-loader": "^3.0.0", "sass-loader": "^8.0.2",
"postcss-preset-env": "^6.5.0", "style-loader": "^1.2.1",
"postcss-reporter": "^6.0.1", "ts-loader": "^7.0.5",
"postcss-url": "^8.0.0",
"prettier": "^1.16.0",
"react-hot-loader": "^4.6.3",
"style-loader": "^0.23.1",
"ts-loader": "^5.3.3",
"tsx-control-statements": "2.17.1",
"typescript": "^3.2.4", "typescript": "^3.2.4",
"url-loader": "^1.1.2", "url-loader": "^4.1.0",
"webpack": "^4.43.0", "webpack": "^4.43.0",
"webpack-cleanup-plugin": "^0.5.1", "webpack-cleanup-plugin": "^0.5.1",
"webpack-cli": "^3.3.11", "webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.1.14", "webpack-dev-server": "^3.1.14",
"webpack-hot-middleware": "^2.24.3" "webpack-hot-middleware": "^2.25.0"
},
"resolutions": {
"html-loader/htmlnano/cssnano/postcss-svgo/svgo/js-yaml": "^3.13.1"
}, },
"dependencies": { "dependencies": {
"classnames": "^2.2.6", "classnames": "^2.2.6",
"history": "^4.10.1",
"mobx": "^5.15.0", "mobx": "^5.15.0",
"mobx-react": "^5.4.3", "mobx-react": "^6.2.2",
"mobx-react-router": "^4.0.5",
"node-sass": "^4.14.1",
"react": "^16.7.0", "react": "^16.7.0",
"react-dom": "^16.7.0", "react-dom": "^16.7.0",
"react-icons": "^3.10.0", "react-icons": "^3.10.0",
"react-router": "^4.3.1", "react-router": "5.2.0",
"react-router-dom": "^5.1.2", "react-router-dom": "5.2.0",
"react-transition-group": "^4.4.1", "react-transition-group": "^4.4.1",
"sass": "^1.26.8",
"sass-lint": "^1.13.1",
"sass-loader": "^8.0.2",
"vivagraphjs": "^0.12.0" "vivagraphjs": "^0.12.0"
} }
} }
plugins/analysis/dashboard/frontend/src/app/components/Root/Root.scss → plugins/analysis/dashboard/frontend/src/app/App.scss
+ 4
− 4
View file @ 0b19469c
@import '../../../sass/colors'; @import '../sass/colors';
@import '../../../sass/fonts'; @import '../sass/fonts';
@import '../../../sass/mixins'; @import '../sass/mixins';
@import '../../../sass/media-queries'; @import '../sass/media-queries';
.root { .root {
header { header {
......
plugins/analysis/dashboard/frontend/src/app/App.tsx
+ 51
− 4
View file @ 0b19469c
import Autopeering from "app/components/Autopeering/Autopeering";
import Conflict from "app/components/FPC/Conflict";
import FPC from "app/components/FPC/FPC";
import { inject, observer } from "mobx-react";
import * as React from 'react'; import * as React from 'react';
import {hot} from 'react-hot-loader/root'; import { Link, Redirect, Route, Switch } from "react-router-dom";
import {Root} from 'app/components/Root/Root'; import logoHeader from "../assets/logo-header.svg";
import "./App.scss";
import { AppProps } from './AppProps';
import { withRouter } from "react-router";
// render react DOM @inject("autopeeringStore")
export const App = hot(({history}) => <Root history={history}/>); @observer
class App extends React.Component<AppProps, any> {
componentDidMount(): void {
this.props.autopeeringStore.connect();
}
render() {
return (
<div className="root">
<header>
<Link className="brand" to="/">
<img src={logoHeader} alt="GoShimmer Analyser" />
<h1>GoShimmer Analyzer</h1>
</Link>
<nav>
<Link to="/autopeering">
Autopeering
</Link>
<Link to="/fpc-example">
Consensus
</Link>
</nav>
<div className="badge-container">
{!this.props.autopeeringStore.websocketConnected &&
<div className="badge">Not connected</div>
}
</div>
</header>
<Switch>
<Route path="/autopeering" component={Autopeering} />
<Route exact path="/fpc-example" component={FPC} />
<Route path="/fpc-example/conflict/:id" component={Conflict} />
<Redirect to="/autopeering" />
</Switch>
{this.props.children}
</div>
);
}
}
export default withRouter(App);
\ No newline at end of file
plugins/analysis/dashboard/frontend/src/app/components/Root/RootProps.tsx → plugins/analysis/dashboard/frontend/src/app/AppProps.tsx
+ 6
− 0
View file @ 0b19469c
import RouterStore from "app/stores/RouterStore";
import AutopeeringStore from "app/stores/AutopeeringStore"; import AutopeeringStore from "app/stores/AutopeeringStore";
import { RouteComponentProps } from "react-router";
export interface RootProps { export interface AppProps extends RouteComponentProps {
history: any;
routerStore?: RouterStore;
autopeeringStore?: AutopeeringStore; autopeeringStore?: AutopeeringStore;
} }
plugins/analysis/dashboard/frontend/src/app/components/Autopeering/Autopeering.tsx
+ 2
− 2
View file @ 0b19469c
...@@ -8,7 +8,7 @@ import { NodeView } from "./NodeView"; ...@@ -8,7 +8,7 @@ import { NodeView } from "./NodeView";
@inject("autopeeringStore") @inject("autopeeringStore")
@observer @observer
export class Autopeering extends React.Component<AutopeeringProps, any> { export default class Autopeering extends React.Component<AutopeeringProps, any> {
componentDidMount(): void { componentDidMount(): void {
this.props.autopeeringStore.start(); this.props.autopeeringStore.start();
...@@ -76,7 +76,7 @@ export class Autopeering extends React.Component<AutopeeringProps, any> { ...@@ -76,7 +76,7 @@ export class Autopeering extends React.Component<AutopeeringProps, any> {
</div> </div>
)} )}
{this.props.autopeeringStore.selectedNode && ( {this.props.autopeeringStore.selectedNode && (
<NodeView /> <NodeView {...this.props} />
)} )}
</div> </div>
</div> </div>
......
plugins/analysis/dashboard/frontend/src/app/components/FPC/Conflict.tsx
+ 6
− 5
View file @ 0b19469c
...@@ -12,7 +12,8 @@ export default class Conflict extends React.Component<FPCProps, any> { ...@@ -12,7 +12,8 @@ export default class Conflict extends React.Component<FPCProps, any> {
} }
render() { render() {
let { nodeGrid } = this.props.fpcStore; let { nodeConflictGrid } = this.props.fpcStore;
return ( return (
<div className="conflict"> <div className="conflict">
<div className="header margin-b-m"> <div className="header margin-b-m">
...@@ -25,19 +26,19 @@ export default class Conflict extends React.Component<FPCProps, any> { ...@@ -25,19 +26,19 @@ export default class Conflict extends React.Component<FPCProps, any> {
</div> </div>
</div> </div>
<div className="node-grid"> <div className="node-grid">
{!nodeGrid && ( {!nodeConflictGrid && (
<div className="card"> <div className="card">
<p>The node data for this conflict is no longer available.</p> <p>The node data for this conflict is no longer available.</p>
</div> </div>
)} )}
{nodeGrid && nodeGrid.map(nodeDetails => ( {nodeConflictGrid && nodeConflictGrid.map(nodeDetails => (
<div <div
key={nodeDetails.nodeID} key={nodeDetails.nodeID}
className={classNames( className={classNames(
"card", "card",
"node-details", "node-details",
{ like: nodeDetails.state === 1 }, { like: nodeDetails.opinion === 1 },
{ dislike: nodeDetails.state === 2 } { dislike: nodeDetails.opinion === 2 }
)} )}
> >
<div className="details row middle"> <div className="details row middle">
......
plugins/analysis/dashboard/frontend/src/app/components/FPC/FPC.tsx
+ 0
− 1
View file @ 0b19469c
...@@ -35,7 +35,6 @@ export default class FPC extends React.Component<FPCProps, any> { ...@@ -35,7 +35,6 @@ export default class FPC extends React.Component<FPCProps, any> {
timeout={300} timeout={300}
> >
<FPCItem <FPCItem
{...conflict} {...conflict}
/> />
</CSSTransition> </CSSTransition>
......
plugins/analysis/dashboard/frontend/src/app/components/FPC/FPCItem.tsx
+ 0
− 1
View file @ 0b19469c
...@@ -12,7 +12,6 @@ export default class FPCItem extends React.Component<FPCItemProps, any> { ...@@ -12,7 +12,6 @@ export default class FPCItem extends React.Component<FPCItemProps, any> {
const total = Object.keys(this.props.nodeOpinions).length; const total = Object.keys(this.props.nodeOpinions).length;
return ( return (
<Link <Link
to={`/fpc-example/conflict/${this.props.conflictID}`} to={`/fpc-example/conflict/${this.props.conflictID}`}
className="fpc-item" className="fpc-item"
> >
......
plugins/analysis/dashboard/frontend/src/app/components/Root/Root.tsx
+ 0
− 51
View file @ 0b19469c
import { Autopeering } from "app/components/Autopeering/Autopeering";
import Conflict from "app/components/FPC/Conflict";
import FPC from "app/components/FPC/FPC";
import { inject, observer } from "mobx-react";
import * as React from 'react';
import { Redirect, Route, Switch, Link } from "react-router-dom";
import "./Root.scss";
import logoHeader from "../../../assets/logo-header.svg";
import { RootProps } from './RootProps';
@inject("routerStore")
@inject("autopeeringStore")
@observer
export class Root extends React.Component<RootProps, any> {
componentDidMount(): void {
this.props.autopeeringStore.connect();
}
render() {
return (
<div className="root">
<header>
<Link className="brand" to="/">
<img src={logoHeader} alt="GoShimmer Analyser" />
<h1>GoShimmer Analyzer</h1>
</Link>
<nav>
<Link to="/autopeering">
Autopeering
</Link>
<Link to="/fpc-example">
Consensus
</Link>
</nav>
<div className="badge-container">
{!this.props.autopeeringStore.websocketConnected &&
<div className="badge">Not connected</div>
}
</div>
</header>
<Switch>
<Route exact path="/autopeering" component={Autopeering} />
<Route exact path="/fpc-example" component={FPC} />
<Route exact path="/fpc-example/conflict/:id" component={Conflict} />
<Redirect to="/autopeering" />
</Switch>
{this.props.children}
</div>
);
}
}
plugins/analysis/dashboard/frontend/src/app/stores/AutopeeringStore.tsx
+ 1
− 6
View file @ 0b19469c
import {RouterStore} from "mobx-react-router";
import {action, computed, observable, ObservableMap, ObservableSet} from "mobx"; import {action, computed, observable, ObservableMap, ObservableSet} from "mobx";
import {connectWebSocket, registerHandler, WSMsgType} from "app/misc/WS"; import {connectWebSocket, registerHandler, WSMsgType} from "app/misc/WS";
import {default as Viva} from 'vivagraphjs'; import {default as Viva} from 'vivagraphjs';
...@@ -47,8 +46,6 @@ const statusWebSocketPath = "/ws"; ...@@ -47,8 +46,6 @@ const statusWebSocketPath = "/ws";
export const shortenedIDCharCount = 8; export const shortenedIDCharCount = 8;
export class AutopeeringStore { export class AutopeeringStore {
routerStore: RouterStore;
@observable nodes = new ObservableSet(); @observable nodes = new ObservableSet();
@observable neighbors = new ObservableMap<string,Neighbors>(); @observable neighbors = new ObservableMap<string,Neighbors>();
@observable connections = new ObservableSet(); @observable connections = new ObservableSet();
...@@ -71,9 +68,7 @@ export class AutopeeringStore { ...@@ -71,9 +68,7 @@ export class AutopeeringStore {
graphics; graphics;
renderer; renderer;
constructor(routerStore: RouterStore) { constructor() {
this.routerStore = routerStore;
registerHandler(WSMsgType.AddNode, this.onAddNode); registerHandler(WSMsgType.AddNode, this.onAddNode);
registerHandler(WSMsgType.RemoveNode, this.onRemoveNode); registerHandler(WSMsgType.RemoveNode, this.onRemoveNode);
registerHandler(WSMsgType.ConnectNodes, this.onConnectNodes); registerHandler(WSMsgType.ConnectNodes, this.onConnectNodes);
......
plugins/analysis/dashboard/frontend/src/app/stores/FPCStore.tsx
+ 3
− 14
View file @ 0b19469c
import { registerHandler, WSMsgType, unregisterHandler } from "app/misc/WS"; import { registerHandler, WSMsgType, unregisterHandler } from "app/misc/WS";
import { action, computed, observable } from "mobx"; import { action, computed, observable } from "mobx";
import { RouterStore } from "mobx-react-router";
enum Opinion { enum Opinion {
Like = 1, Like = 1,
...@@ -23,8 +22,6 @@ export class FPCMessage { ...@@ -23,8 +22,6 @@ export class FPCMessage {
} }
export class FPCStore { export class FPCStore {
routerStore: RouterStore;
@observable msg: FPCMessage = null; @observable msg: FPCMessage = null;
@observable conflicts: { @observable conflicts: {
...@@ -38,8 +35,7 @@ export class FPCStore { ...@@ -38,8 +35,7 @@ export class FPCStore {
timerId: NodeJS.Timer; timerId: NodeJS.Timer;
constructor(routerStore: RouterStore) { constructor() {
this.routerStore = routerStore;
} }
start() { start() {
...@@ -117,18 +113,11 @@ export class FPCStore { ...@@ -117,18 +113,11 @@ export class FPCStore {
} }
@computed @computed
get nodeGrid() { get nodeConflictGrid() {
if (!this.currentConflict) return; if (!this.currentConflict) return;
const currentConflict = this.conflicts.find(c => c.conflictID === this.currentConflict); const currentConflict = this.conflicts.find(c => c.conflictID === this.currentConflict);
if (!currentConflict) return; if (!currentConflict) return;
let nodeDetails = []; return currentConflict.nodeOpinions;
for (const nodeID in currentConflict.nodeOpinions) {
nodeDetails.push({
nodeId: nodeID,
state: currentConflict.nodeOpinions[nodeID]
});
}
return nodeDetails;
} }
@computed @computed
......
plugins/analysis/dashboard/frontend/src/app/stores/RouterStore.ts deleted 100644 → 0
+ 0
− 13
View file @ 75d85e95
import {History} from 'history';
import {RouterStore as BaseRouterStore, syncHistoryWithStore} from 'mobx-react-router';
export class RouterStore extends BaseRouterStore {
constructor(history?: History) {
super();
if (history) {
this.history = syncHistoryWithStore(history, this);
}
}
}
export default RouterStore;
plugins/analysis/dashboard/frontend/src/main.tsx
+ 10
− 17
View file @ 0b19469c
import App from 'app/App';
import AutopeeringStore from "app/stores/AutopeeringStore";
import FPCStore from "app/stores/FPCStore";
import { Provider } from 'mobx-react';
import * as React from 'react'; import * as React from 'react';
import * as ReactDOM from 'react-dom'; import * as ReactDOM from 'react-dom';
import {Provider} from 'mobx-react'; import { Route } from 'react-router';
import {createBrowserHistory} from 'history'; import { BrowserRouter as Router } from 'react-router-dom';
import {App} from 'app/App';
import {RouterStore, syncHistoryWithStore} from 'mobx-react-router';
import {Router} from 'react-router-dom';
import FPCStore from "app/stores/FPCStore";
import AutopeeringStore from "app/stores/AutopeeringStore";
import "./main.scss"; import "./main.scss";
// prepare MobX stores const fpcStore = new FPCStore();
const routerStore = new RouterStore(); const autopeeringStore = new AutopeeringStore()
const fpcStore = new FPCStore(routerStore);
const autopeeringStore = new AutopeeringStore(routerStore)
const stores = { const stores = {
"routerStore": routerStore,
"fpcStore": fpcStore, "fpcStore": fpcStore,
"autopeeringStore": autopeeringStore, "autopeeringStore": autopeeringStore,
}; };
const browserHistory = createBrowserHistory();
const history = syncHistoryWithStore(browserHistory, routerStore);
// render react DOM // render react DOM
ReactDOM.render( ReactDOM.render(
<Provider {...stores}> <Provider {...stores}>
<Router history={history}> <Router>
<App history={history}/> <Route component={(props) => <App {...props} />} />
</Router> </Router>
</Provider>, </Provider>,
document.getElementById('root') document.getElementById('root')
......
plugins/analysis/dashboard/frontend/webpack.config.js
+ 16
− 48
View file @ 0b19469c
let webpack = require('webpack'); let webpack = require('webpack');
let path = require('path'); let path = require('path');
const statements = require('tsx-control-statements').default;
// variables // variables
let isProduction = let isProduction =
process.argv.indexOf('-p') >= 0 || process.env.NODE_ENV === 'production'; process.argv.indexOf('-p') >= 0 || process.env.NODE_ENV === 'production';
...@@ -11,7 +9,6 @@ let outPath = path.join(__dirname, './build'); ...@@ -11,7 +9,6 @@ let outPath = path.join(__dirname, './build');
// plugins // plugins
let HtmlWebpackPlugin = require('html-webpack-plugin'); let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
let WebpackCleanupPlugin = require('webpack-cleanup-plugin'); let WebpackCleanupPlugin = require('webpack-cleanup-plugin');
module.exports = { module.exports = {
...@@ -43,51 +40,26 @@ module.exports = { ...@@ -43,51 +40,26 @@ module.exports = {
use: [ use: [
!isProduction && { !isProduction && {
loader: 'babel-loader', loader: 'babel-loader',
options: {plugins: ['react-hot-loader/babel']}
},
{
loader: 'ts-loader',
options: { options: {
getCustomTransformers: () => ({ before: [statements()] }) plugins: ['react-hot-loader/babel']
} }
}
].filter(Boolean)
}, },
// css
{ {
test: /\.css$/, loader: 'ts-loader'
use: [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
{
loader: 'css-loader',
query: {
modules: true,
sourceMap: !isProduction,
importLoaders: 1,
localIdentName: isProduction
? '[hash:base64:5]'
: '[local]__[hash:base64:5]'
} }
].filter(Boolean)
}, },
// scss
{ {
loader: 'postcss-loader', test: /\.s[ac]ss$/i,
options: { use: [
ident: 'postcss', // Creates `style` nodes from JS strings
plugins: [ 'style-loader',
require('postcss-import')({addDependencyTo: webpack}), // Translates CSS into CommonJS
require('postcss-url')(), 'css-loader',
require('postcss-preset-env')({ // Compiles Sass to CSS
/* use stage 2 features (defaults) */ 'sass-loader',
stage: 2 ],
}),
require('postcss-reporter')(),
require('postcss-browser-reporter')({
disabled: isProduction
})
]
}
}
]
}, },
// static assets // static assets
{ test: /\.html$/, use: 'html-loader' }, { test: /\.html$/, use: 'html-loader' },
...@@ -122,13 +94,9 @@ module.exports = { ...@@ -122,13 +94,9 @@ module.exports = {
DEBUG: false DEBUG: false
}), }),
new WebpackCleanupPlugin(), new WebpackCleanupPlugin(),
new MiniCssExtractPlugin({
filename: isProduction ? '[contenthash].css' : '[hash].css',
disable: !isProduction
}),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
template: 'assets/index.html' template: 'assets/index.html'
}), })
], ],
devServer: { devServer: {
contentBase: sourcePath, contentBase: sourcePath,
......
plugins/analysis/dashboard/frontend/yarn.lock deleted 100644 → 0
+ 0
− 7335
View file @ 75d85e95
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment