Code Monkey home page Code Monkey logo

xhprof-ui-js's Introduction

XHProf-UI.js

Modern, flexible and Mobile friendly UI for viewing XHProf dumps.

Desktop Mobile
Main Window Dektop Main Window Mobile

Table of Contents

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
Columns Dektop Columns 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
Filter Dektop Filter 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
Pagination Dektop Pagination Mobile

How to install

Clone the repo, then in the project directory you can run:

npm install

This command will install required packages described in package.json and package-lock.json.

Then run the app in the development mode:

npm start

Open http://localhost:3000 to view it in the browser.

But in case if you need deployable application instead of npm start us this:

npm run build

This command build the app for production to the build folder.

Other

This application created using following technologies:

xhprof-ui-js's People

Contributors

evilfreelancer avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.