sander/perfix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

created ui view for callstack

Browse source
This commit is contained in:
Sander Hautvast 2018-07-15 15:32:52 +02:00
parent 74e270776d
commit aeba8ab43c
6 changed files with 104 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
ui/public/favicon.ico
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 17 KiB

2
ui/public/index.html
View file

@ -19,7 +19,7 @@
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`.
-->
<title>React App</title>
<title>Perfix</title>
</head>
<body>
<noscript>

62
ui/src/App.css
View file

@ -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 {
border-collapse: collapse;
text-align: left;
@ -5,9 +56,9 @@
}
.datagrid {
padding: 10px;
font: normal 12px/150% Arial, Helvetica, sans-serif;
background: #fff;
overflow: hidden;
border: 1px solid #006699;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
@ -19,14 +70,7 @@
}
.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 {

6
ui/src/App.js → ui/src/List.js
View file

@ -2,7 +2,7 @@ import React, { Component } from 'react';
import './App.css';
import axios from 'axios';
class App extends Component {
class List extends Component {
state = {
data: []
}
@ -21,7 +21,7 @@ class App extends Component {
render() {
return (
<div className="datagrid">
<button type="button" onClick={() => this.loadData()}>refresh</button>
<h1>List view</h1>
<table>
<thead><tr><th>name</th><th>invocations</th><th>totalDuration</th><th>average</th></tr></thead>
<tbody>
@ -35,4 +35,4 @@ class App extends Component {
}
}
export default App;
export default List;

45
ui/src/Tree.js Normal file
View 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 &nbsp;
- {r.report.invocations} inv. &nbsp;
{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;

4
ui/src/index.js
View file

@ -1,8 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Tree from './Tree';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<Tree />, document.getElementById('root'));
registerServiceWorker();