created ui view for callstack
This commit is contained in:
Sander Hautvast
parent
74e270776d
commit
aeba8ab43c
6 changed files with 104 additions and 15 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 17 KiB |
|
|
@ -19,7 +19,7 @@
|
||||||
work correctly both with client-side routing and a non-root public URL.
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
Learn how to configure a non-root public URL by running `npm run build`.
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
-->
|
-->
|
||||||
<title>React App</title>
|
<title>Perfix</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,54 @@
|
||||||
|
body {
|
||||||
|
background:white;
|
||||||
|
font: normal 12px/150% Arial, Helvetica, sans-serif;
|
||||||
|
padding:5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view{
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #006699;
|
||||||
|
-webkit-border-radius: 3px;
|
||||||
|
-moz-border-radius: 3px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Framework starts from here ...
|
||||||
|
* ------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
.tree,
|
||||||
|
.tree ul {
|
||||||
|
margin:0 0 0 1em; /* indentation */
|
||||||
|
padding:0;
|
||||||
|
list-style:none;
|
||||||
|
color:#369;
|
||||||
|
position:relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree ul {margin-left:.5em} /* (indentation/2) */
|
||||||
|
|
||||||
|
.tree:before,
|
||||||
|
.tree ul:before {
|
||||||
|
content:"";
|
||||||
|
display:block;
|
||||||
|
width:0;
|
||||||
|
position:absolute;
|
||||||
|
top:0;
|
||||||
|
bottom:0;
|
||||||
|
left:0;
|
||||||
|
border-left:1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree li {
|
||||||
|
margin:0;
|
||||||
|
padding:0 1.5em; /* indentation + .5em */
|
||||||
|
line-height:2em; /* default list item's `line-height` */
|
||||||
|
position:relative;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.datagrid table {
|
.datagrid table {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
@ -5,9 +56,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.datagrid {
|
.datagrid {
|
||||||
|
padding: 10px;
|
||||||
font: normal 12px/150% Arial, Helvetica, sans-serif;
|
font: normal 12px/150% Arial, Helvetica, sans-serif;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
overflow: hidden;
|
|
||||||
border: 1px solid #006699;
|
border: 1px solid #006699;
|
||||||
-webkit-border-radius: 3px;
|
-webkit-border-radius: 3px;
|
||||||
-moz-border-radius: 3px;
|
-moz-border-radius: 3px;
|
||||||
|
|
@ -19,14 +70,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.datagrid table thead th {
|
.datagrid table thead th {
|
||||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F));
|
|
||||||
background: -moz-linear-gradient(center top, #006699 5%, #00557F 100%);
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
|
|
||||||
background-color: #006699;
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: bold;
|
|
||||||
border-left: 1px solid #0070A8;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.datagrid table thead th:first-child {
|
.datagrid table thead th:first-child {
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ import React, { Component } from 'react';
|
||||||
import './App.css';
|
import './App.css';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
|
||||||
class App extends Component {
|
class List extends Component {
|
||||||
state = {
|
state = {
|
||||||
data: []
|
data: []
|
||||||
}
|
}
|
||||||
|
|
@ -21,7 +21,7 @@ class App extends Component {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="datagrid">
|
<div className="datagrid">
|
||||||
<button type="button" onClick={() => this.loadData()}>refresh</button>
|
<h1>List view</h1>
|
||||||
<table>
|
<table>
|
||||||
<thead><tr><th>name</th><th>invocations</th><th>totalDuration</th><th>average</th></tr></thead>
|
<thead><tr><th>name</th><th>invocations</th><th>totalDuration</th><th>average</th></tr></thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
|
|
@ -35,4 +35,4 @@ class App extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default List;
|
||||||
45
ui/src/Tree.js
Normal file
45
ui/src/Tree.js
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import axios from 'axios';
|
||||||
|
import List from './List';
|
||||||
|
|
||||||
|
class Tree extends Component {
|
||||||
|
state = { data: [] };
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.loadData();
|
||||||
|
}
|
||||||
|
|
||||||
|
loadData() {
|
||||||
|
axios.get("http://localhost:2048/callstack")
|
||||||
|
.then(response => this.setState({ data: response.data }));
|
||||||
|
}
|
||||||
|
|
||||||
|
renderChildren(children) {
|
||||||
|
return (<ul className="tree">
|
||||||
|
{children.map(
|
||||||
|
r =>
|
||||||
|
<li>
|
||||||
|
{Math.floor(r.report.average / 1000) / 1000} ms
|
||||||
|
- {r.report.invocations} inv.
|
||||||
|
{r.report.name}
|
||||||
|
{this.renderChildren(r.children)}
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
|
</ul>)
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="view"><h1>Callstack view</h1>
|
||||||
|
{/* <button type="button" onClick={this.loadData()}> refresh </button> */}
|
||||||
|
{this.renderChildren(this.state.data)}
|
||||||
|
</div>
|
||||||
|
<p/>
|
||||||
|
<List/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Tree;
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import './index.css';
|
import './index.css';
|
||||||
import App from './App';
|
import Tree from './Tree';
|
||||||
import registerServiceWorker from './registerServiceWorker';
|
import registerServiceWorker from './registerServiceWorker';
|
||||||
|
|
||||||
ReactDOM.render(<App />, document.getElementById('root'));
|
ReactDOM.render(<Tree />, document.getElementById('root'));
|
||||||
registerServiceWorker();
|
registerServiceWorker();
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue