https://github.com/evilfreelancer/xhprof-ui-js
Modern, flexible and mobile friendly application for analyzing PHP XHProf dumps
https://github.com/evilfreelancer/xhprof-ui-js
javascript meterial-ui react redux xhprof xhprof-ui
Last synced: 7 months ago
JSON representation
Modern, flexible and mobile friendly application for analyzing PHP XHProf dumps
- Host: GitHub
- URL: https://github.com/evilfreelancer/xhprof-ui-js
- Owner: EvilFreelancer
- License: mit
- Created: 2021-11-25T10:52:43.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-09-27T08:40:55.000Z (over 1 year ago)
- Last Synced: 2025-04-06T14:21:22.351Z (about 1 year ago)
- Topics: javascript, meterial-ui, react, redux, xhprof, xhprof-ui
- Language: JavaScript
- Homepage: https://xhprof-ui-js.xyz
- Size: 3.79 MB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# XHProf-UI.js
Modern, flexible and Mobile friendly UI for
viewing [XHProf](https://github.com/longxinH/xhprof) dumps.
| Desktop | Mobile |
|---------|--------|
|||
## Table of Contents
* [Features](#Features)
* [Selecting visible columns](#Selecting-visible-columns)
* [Searching and filtering](#Searching-and-filtering)
* [Order by column](#Order-by-column)
* [Pagination](#Pagination)
* [How to install](#How-to-install)
* [Other](#Other)
## Features
The main idea of this application is to make it possible to read dumps
of the XHProf profiler without installing setting up a database, an
interpretator on a backend, and so on.
All you need is a browser and the XHProf's dump files.
Because IT "things" should be as simple as possible!
Plus, the existing systems for viewing XHProf files do not support
mobile devices, but of course, you may open legacy XHProf UI or LiveProf
or any other systems on mobile, but the UI will cause a headache because
these systems are optimized only for desktops. But sometimes you really
want to download a dump file from the Slack and just quickly watch it on
your mobile phone :)
### Selecting visible columns
Sometimes you need just check Wall Time in combination with amount of
function Calls, on exists XHProf viewers you can't turn off not required
columns, but this app support this feature.
Button which opens this modal can be found on the left side of a main menu.
| Desktop | Mobile |
|---------|--------|
|||
### Searching and filtering
If you need a filter by function just click on the required function,
if you don't know the full name of a function, then you may find it via
search.
| Desktop | Mobile |
|---------|--------|
|||
### Order by column
The application may order XHProf results in ASC and DESC order,
just click to column at table header.
### Pagination
On "desktop view" at the left bottom corner of the application you may find a pagination component.
On "mobile view" in top menu you may find "book" icon, this icon opens a pagination modal.
| Desktop | Mobile |
|---------|--------|
|||
## How to install
Clone the repo, then in the project directory you can run:
```shell
npm install
```
This command will install required packages described in
[package.json](./package.json) and [package-lock.json](./package-lock.json).
Then run the app in the development mode:
```shell
npm start
```
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
But in case if you need deployable application instead of `npm start` us this:
```shell
npm run build
```
This command build the app for production to the `build` folder.
## Usage
How to save xhprof data in the correct format for this tool:
```
xhprof_enable(XHPROF_FLAGS_CPU + XHPROF_FLAGS_MEMORY);
//your code to analyze here
$xhprof_data = xhprof_disable();
file_put_contents('/tmp/xhprof.json', json_encode($xhprof_data));
```
## Other
This application created using following technologies:
* [React](https://reactjs.org/)
* [Redux](https://redux.js.org/)
* [Material UI](https://mui.com/)