mirror of
https://github.com/Kae7in/perfview
synced 2026-08-09 12:09:44 +00:00
Getting forked master (Kae7in/perfview) in sync with my ui branch.
This commit is contained in:
Kaelin Hooper
@@ -0,0 +1,100 @@
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Threading.Tasks;
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
using Newtonsoft.Json;
|
||||
|
||||
// For more information on enabling Web API for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
|
||||
|
||||
namespace PerfViewService.Controllers
|
||||
{
|
||||
[Route("api/[controller]/open")]
|
||||
public class DataController : Controller
|
||||
{
|
||||
// GET: api/data
|
||||
[HttpGet]
|
||||
public string Get()
|
||||
{
|
||||
// Dictionary containing entire hierarchy
|
||||
Dictionary<string, object> tree = new Dictionary<string, object>();
|
||||
tree.Add("status", "OK");
|
||||
|
||||
// Top level items
|
||||
List<object> items = new List<object>();
|
||||
tree.Add("items", items);
|
||||
|
||||
// First top level item
|
||||
Dictionary<string, object> item = new Dictionary<string, object>();
|
||||
items.Add(item);
|
||||
item.Add("name", "TraceInfo");
|
||||
item.Add("type", "htmlReport");
|
||||
|
||||
// Second top level item
|
||||
item = new Dictionary<string, object>();
|
||||
items.Add(item);
|
||||
item.Add("name", "Cpu Stacks");
|
||||
item.Add("type", "stackViewer");
|
||||
|
||||
// First top level folder
|
||||
item = new Dictionary<string, object>();
|
||||
items.Add(item);
|
||||
item.Add("name", "Test Folder 1");
|
||||
item.Add("type", "file");
|
||||
List<object> subItems = new List<object>();
|
||||
item.Add("items", subItems);
|
||||
|
||||
// Folder subitem
|
||||
Dictionary<string, object> subItem = new Dictionary<string, object>();
|
||||
subItems.Add(subItem);
|
||||
subItem.Add("name", "Dump");
|
||||
subItem.Add("type", "otherType");
|
||||
|
||||
// Folder subitem
|
||||
subItem = new Dictionary<string, object>();
|
||||
subItems.Add(subItem);
|
||||
subItem.Add("name", "Trace");
|
||||
subItem.Add("type", "otherType");
|
||||
|
||||
// Third top level item
|
||||
item = new Dictionary<string, object>();
|
||||
items.Add(item);
|
||||
item.Add("name", "Another Top Level Item");
|
||||
item.Add("type", "otherType");
|
||||
|
||||
string json = JsonConvert.SerializeObject(tree, Formatting.Indented);
|
||||
|
||||
if (json == null)
|
||||
{
|
||||
// Form a response using HttpResponseException
|
||||
}
|
||||
|
||||
return json;
|
||||
}
|
||||
|
||||
// GET api/values/5
|
||||
[HttpGet("{id}")]
|
||||
public string Get(int id)
|
||||
{
|
||||
return "value";
|
||||
}
|
||||
|
||||
// POST api/values
|
||||
[HttpPost]
|
||||
public void Post([FromBody]string value)
|
||||
{
|
||||
}
|
||||
|
||||
// PUT api/values/5
|
||||
[HttpPut("{id}")]
|
||||
public void Put(int id, [FromBody]string value)
|
||||
{
|
||||
}
|
||||
|
||||
// DELETE api/values/5
|
||||
[HttpDelete("{id}")]
|
||||
public void Delete(int id)
|
||||
{
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Threading.Tasks;
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
|
||||
namespace PerfViewService.Controllers
|
||||
{
|
||||
[Route("api/[controller]")]
|
||||
public class ValuesController : Controller
|
||||
{
|
||||
// GET api/values
|
||||
[HttpGet]
|
||||
public IEnumerable<string> Get()
|
||||
{
|
||||
return new string[] { "value1", "value2" };
|
||||
}
|
||||
|
||||
// GET api/values/5
|
||||
[HttpGet("{id}")]
|
||||
public string Get(int id)
|
||||
{
|
||||
return "value";
|
||||
}
|
||||
|
||||
// POST api/values
|
||||
[HttpPost]
|
||||
public void Post([FromBody]string value)
|
||||
{
|
||||
}
|
||||
|
||||
// PUT api/values/5
|
||||
[HttpPut("{id}")]
|
||||
public void Put(int id, [FromBody]string value)
|
||||
{
|
||||
}
|
||||
|
||||
// DELETE api/values/5
|
||||
[HttpDelete("{id}")]
|
||||
public void Delete(int id)
|
||||
{
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -19,7 +19,7 @@
|
||||
"PerfViewService": {
|
||||
"commandName": "Project",
|
||||
"launchBrowser": true,
|
||||
"launchUrl": "http://localhost:5000/api/values",
|
||||
"launchUrl": "http://localhost:5000/view/static/index.html",
|
||||
"environmentVariables": {
|
||||
"ASPNETCORE_ENVIRONMENT": "Development"
|
||||
}
|
||||
|
||||
@@ -7,6 +7,9 @@ using Microsoft.AspNetCore.Hosting;
|
||||
using Microsoft.Extensions.Configuration;
|
||||
using Microsoft.Extensions.DependencyInjection;
|
||||
using Microsoft.Extensions.Logging;
|
||||
using Microsoft.AspNetCore.StaticFiles;
|
||||
using Microsoft.Extensions.FileProviders;
|
||||
using System.IO;
|
||||
|
||||
namespace PerfViewService
|
||||
{
|
||||
@@ -51,6 +54,15 @@ namespace PerfViewService
|
||||
app.UseApplicationInsightsExceptionTelemetry();
|
||||
|
||||
app.UseMvc();
|
||||
|
||||
app.UseStaticFiles();
|
||||
|
||||
app.UseStaticFiles(new StaticFileOptions()
|
||||
{
|
||||
FileProvider = new PhysicalFileProvider(
|
||||
Path.Combine(Directory.GetCurrentDirectory(), @"view")),
|
||||
RequestPath = new Microsoft.AspNetCore.Http.PathString("/view")
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{
|
||||
{
|
||||
"dependencies": {
|
||||
"Microsoft.NETCore.App": {
|
||||
"version": "1.0.0-rc2-3002702",
|
||||
@@ -14,6 +14,8 @@
|
||||
"Microsoft.Extensions.Logging": "1.0.0-rc2-final",
|
||||
"Microsoft.Extensions.Logging.Console": "1.0.0-rc2-final",
|
||||
"Microsoft.Extensions.Logging.Debug": "1.0.0-rc2-final",
|
||||
"Newtonsoft.Json": "8.0.3",
|
||||
"Microsoft.AspNetCore.StaticFiles": "1.0.0-rc2-final",
|
||||
"TraceEventCore": "1.0.41"
|
||||
},
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,27 @@
|
||||
function Delegate() {
|
||||
var self = this;
|
||||
var domain = "http://localhost:5000";
|
||||
|
||||
this.log = function log(status) {
|
||||
$("#statusBar span").text(status);
|
||||
}
|
||||
|
||||
this.httpGet = function httpGet(url, callback) {
|
||||
url = domain + url;
|
||||
var xmlHttp = new XMLHttpRequest();
|
||||
xmlHttp.onreadystatechange = function() {
|
||||
if (xmlHttp.readyState == 4) {
|
||||
if (xmlHttp.status == 200) {
|
||||
self.log("GET " + url + " Complete");
|
||||
callback(JSON.parse(xmlHttp.responseText));
|
||||
} else {
|
||||
self.log("GET " + url + " " + xmlHttp.status);
|
||||
}
|
||||
}
|
||||
}
|
||||
xmlHttp.open("GET", url, true);
|
||||
xmlHttp.send(null);
|
||||
}
|
||||
}
|
||||
|
||||
delegate = new Delegate();
|
||||
@@ -0,0 +1 @@
|
||||
The libraries directory contains libraries and other resources that are not node modules.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 62 B |
Binary file not shown.
|
After Width: | Height: | Size: 87 B |
@@ -0,0 +1,23 @@
|
||||
/* Put this inside a @media qualifier so Netscape 4 ignores it */
|
||||
@media screen, print {
|
||||
/* Turn off list bullets */
|
||||
ul.mktree li { list-style: none; }
|
||||
/* Control how "spaced out" the tree is */
|
||||
ul.mktree, ul.mktree ul , ul.mktree li { margin-left:10px; padding:0px; }
|
||||
/* Provide space for our own "bullet" inside the LI */
|
||||
ul.mktree li .bullet { padding-left: 15px; }
|
||||
/* Show "bullets" in the links, depending on the class of the LI that the link's in */
|
||||
ul.mktree li.liOpen .bullet { cursor: pointer; background: url(minus.gif) center left no-repeat; }
|
||||
ul.mktree li.liClosed .bullet { cursor: pointer; background: url(plus.gif) center left no-repeat; }
|
||||
ul.mktree li.liBullet .bullet { cursor: default; background: url(bullet.gif) center left no-repeat; }
|
||||
/* Sublists are visible or not based on class of parent LI */
|
||||
ul.mktree li.liOpen ul { display: block; }
|
||||
ul.mktree li.liClosed ul { display: none; }
|
||||
|
||||
/* Format menu items differently depending on what level of the tree they are in */
|
||||
/* Uncomment this if you want your fonts to decrease in size the deeper they are in the tree */
|
||||
/*
|
||||
ul.mktree li ul li { font-size: 90% }
|
||||
*/
|
||||
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
/**
|
||||
* Copyright (c)2005-2009 Matt Kruse (javascripttoolbox.com)
|
||||
*
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
* This basically means you can use this code however you want for
|
||||
* free, but don't claim to have written it yourself!
|
||||
* Donations always accepted: http://www.JavascriptToolbox.com/donate/
|
||||
*
|
||||
* Please do not link to the .js files on javascripttoolbox.com from
|
||||
* your site. Copy the files locally to your server instead.
|
||||
*
|
||||
*/
|
||||
/*
|
||||
This code is inspired by and extended from Stuart Langridge's aqlist code:
|
||||
http://www.kryogenix.org/code/browser/aqlists/
|
||||
Stuart Langridge, November 2002
|
||||
sil@kryogenix.org
|
||||
Inspired by Aaron's labels.js (http://youngpup.net/demos/labels/)
|
||||
and Dave Lindquist's menuDropDown.js (http://www.gazingus.org/dhtml/?id=109)
|
||||
*/
|
||||
|
||||
// Automatically attach a listener to the window onload, to convert the trees
|
||||
addEvent(window,"load",convertTrees);
|
||||
|
||||
// Utility function to add an event listener
|
||||
function addEvent(o,e,f){
|
||||
if (o.addEventListener){ o.addEventListener(e,f,false); return true; }
|
||||
else if (o.attachEvent){ return o.attachEvent("on"+e,f); }
|
||||
else { return false; }
|
||||
}
|
||||
|
||||
// utility function to set a global variable if it is not already set
|
||||
function setDefault(name,val) {
|
||||
if (typeof(window[name])=="undefined" || window[name]==null) {
|
||||
window[name]=val;
|
||||
}
|
||||
}
|
||||
|
||||
// Full expands a tree with a given ID
|
||||
function expandTree(treeId) {
|
||||
var ul = document.getElementById(treeId);
|
||||
if (ul == null) { return false; }
|
||||
expandCollapseList(ul,nodeOpenClass);
|
||||
}
|
||||
|
||||
// Fully collapses a tree with a given ID
|
||||
function collapseTree(treeId) {
|
||||
var ul = document.getElementById(treeId);
|
||||
if (ul == null) { return false; }
|
||||
expandCollapseList(ul,nodeClosedClass);
|
||||
}
|
||||
|
||||
// Expands enough nodes to expose an LI with a given ID
|
||||
function expandToItem(treeId,itemId) {
|
||||
var ul = document.getElementById(treeId);
|
||||
if (ul == null) { return false; }
|
||||
var ret = expandCollapseList(ul,nodeOpenClass,itemId);
|
||||
if (ret) {
|
||||
var o = document.getElementById(itemId);
|
||||
if (o.scrollIntoView) {
|
||||
o.scrollIntoView(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Performs 3 functions:
|
||||
// a) Expand all nodes
|
||||
// b) Collapse all nodes
|
||||
// c) Expand all nodes to reach a certain ID
|
||||
function expandCollapseList(ul,cName,itemId) {
|
||||
if (!ul.childNodes || ul.childNodes.length==0) { return false; }
|
||||
// Iterate LIs
|
||||
for (var itemi=0;itemi<ul.childNodes.length;itemi++) {
|
||||
var item = ul.childNodes[itemi];
|
||||
if (itemId!=null && item.id==itemId) { return true; }
|
||||
if (item.nodeName == "LI") {
|
||||
// Iterate things in this LI
|
||||
var subLists = false;
|
||||
for (var sitemi=0;sitemi<item.childNodes.length;sitemi++) {
|
||||
var sitem = item.childNodes[sitemi];
|
||||
if (sitem.nodeName=="UL") {
|
||||
subLists = true;
|
||||
var ret = expandCollapseList(sitem,cName,itemId);
|
||||
if (itemId!=null && ret) {
|
||||
item.className=cName;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (subLists && itemId==null) {
|
||||
item.className = cName;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Search the document for UL elements with the correct CLASS name, then process them
|
||||
function convertTrees() {
|
||||
setDefault("treeClass","mktree");
|
||||
setDefault("nodeClosedClass","liClosed");
|
||||
setDefault("nodeOpenClass","liOpen");
|
||||
setDefault("nodeBulletClass","liBullet");
|
||||
setDefault("nodeLinkClass","bullet");
|
||||
setDefault("preProcessTrees",true);
|
||||
if (preProcessTrees) {
|
||||
if (!document.createElement) { return; } // Without createElement, we can't do anything
|
||||
var uls = document.getElementsByTagName("ul");
|
||||
if (uls==null) { return; }
|
||||
var uls_length = uls.length;
|
||||
for (var uli=0;uli<uls_length;uli++) {
|
||||
var ul=uls[uli];
|
||||
if (ul.nodeName=="UL" && ul.className==treeClass) {
|
||||
processList(ul);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function treeNodeOnclick() {
|
||||
this.parentNode.className = (this.parentNode.className==nodeOpenClass) ? nodeClosedClass : nodeOpenClass;
|
||||
return false;
|
||||
}
|
||||
function retFalse() {
|
||||
return false;
|
||||
}
|
||||
// Process a UL tag and all its children, to convert to a tree
|
||||
function processList(ul) {
|
||||
if (!ul.childNodes || ul.childNodes.length==0) { return; }
|
||||
// Iterate LIs
|
||||
var childNodesLength = ul.childNodes.length;
|
||||
for (var itemi=0;itemi<childNodesLength;itemi++) {
|
||||
var item = ul.childNodes[itemi];
|
||||
if (item.nodeName == "LI") {
|
||||
// Iterate things in this LI
|
||||
var subLists = false;
|
||||
var itemChildNodesLength = item.childNodes.length;
|
||||
for (var sitemi=0;sitemi<itemChildNodesLength;sitemi++) {
|
||||
var sitem = item.childNodes[sitemi];
|
||||
if (sitem.nodeName=="UL") {
|
||||
subLists = true;
|
||||
processList(sitem);
|
||||
}
|
||||
}
|
||||
var s= document.createElement("SPAN");
|
||||
var t= '\u00A0'; //
|
||||
s.className = nodeLinkClass;
|
||||
if (subLists) {
|
||||
// This LI has UL's in it, so it's a +/- node
|
||||
if (item.className==null || item.className=="") {
|
||||
item.className = nodeClosedClass;
|
||||
}
|
||||
// If it's just text, make the text work as the link also
|
||||
if (item.firstChild.nodeName=="#text") {
|
||||
t = t+item.firstChild.nodeValue;
|
||||
item.removeChild(item.firstChild);
|
||||
}
|
||||
s.onclick = treeNodeOnclick;
|
||||
}
|
||||
else {
|
||||
// No sublists, so it's just a bullet node
|
||||
item.className = nodeBulletClass;
|
||||
s.onclick = retFalse;
|
||||
}
|
||||
s.appendChild(document.createTextNode(t));
|
||||
item.insertBefore(s,item.firstChild);
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 89 B |
@@ -0,0 +1,35 @@
|
||||
var app = require('electron').app
|
||||
const BrowserWindow = require('electron').BrowserWindow;
|
||||
|
||||
|
||||
|
||||
let win;
|
||||
|
||||
function createWindow() {
|
||||
|
||||
win = new BrowserWindow({width: 800, height: 600});
|
||||
|
||||
win.loadURL('file://' + __dirname + '/static/index.html');
|
||||
|
||||
win.webContents.openDevTools();
|
||||
|
||||
win.on('closed', () => {
|
||||
win = null;
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
app.on('ready', createWindow);
|
||||
|
||||
app.on('window-all-closed', () => {
|
||||
if (process.platform !== 'darwin') {
|
||||
app.quit();
|
||||
}
|
||||
})
|
||||
|
||||
app.on('activate', () => {
|
||||
if (win === null) {
|
||||
createWindow();
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "perfview",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "main.js",
|
||||
"dependencies": {
|
||||
"basiccontext": "^3.5.1",
|
||||
"jquery": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"electron-prebuilt": "^1.2.2"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "electron main.js"
|
||||
},
|
||||
"author": "Kaelin D. Hooper",
|
||||
"license": "ISC"
|
||||
}
|
||||
@@ -0,0 +1,214 @@
|
||||
|
||||
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
font-family: Verdana, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
Nav Bar Views
|
||||
-------------
|
||||
*/
|
||||
/* Wrapper for Nav Bar Views */
|
||||
.nav {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Wrapper for Dropdown Navbar and Helpful Links */
|
||||
.nav .navItems {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
background-color: #4169e1;
|
||||
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
|
||||
.nav .navItems li {
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
.nav .top-level-dropdown {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.nav ul {
|
||||
padding-left: .2em;
|
||||
}
|
||||
|
||||
.nav .top-level-dropdown a, .nav .helpfulLinks a {
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
font-family: Helvetica, sans-serif;
|
||||
padding: .7em;
|
||||
color: white;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav .top-level-dropdown a:hover { color: #000000; }
|
||||
.nav .top-level-dropdown > li:hover { background: #CCCCCC; }
|
||||
|
||||
.nav .top-level-dropdown li:hover > ul {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.nav .second-level-dropdown {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: none;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.nav .second-level-dropdown > li {
|
||||
background: #999999;
|
||||
}
|
||||
|
||||
.nav .second-level-dropdown > li:hover { background: #CCCCCC; }
|
||||
|
||||
.nav .helpfulLinks {
|
||||
margin: 0;
|
||||
justify-content: flex-end;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/*.nav .helpfulLinks li:hover {
|
||||
background: #CCCCCC;
|
||||
}*/
|
||||
|
||||
.nav .helpfulLinks li a:hover {
|
||||
color: #000000;
|
||||
}
|
||||
/*------------*/
|
||||
|
||||
|
||||
|
||||
/*
|
||||
Tree View and Welcome View
|
||||
-----------------------
|
||||
*/
|
||||
/* Wrapper for Side Bar View and Welcome View */
|
||||
.wrapper {
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.wrapper #sideBarContainer {
|
||||
min-width: 20em;
|
||||
border-right-style: solid;
|
||||
border-right-width: .15em;
|
||||
border-right-color: #4169e1;
|
||||
}
|
||||
|
||||
/* Directory Selector and Filter */
|
||||
.wrapper #sideBarContainer #dirSelect {
|
||||
margin: 0;
|
||||
height: 1.5em;
|
||||
background-color: darkgrey;
|
||||
}
|
||||
|
||||
.wrapper #sideBarContainer #dirSelect {
|
||||
background-color: white;
|
||||
border: none;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wrapper #sideBarContainer #dirSelect::-webkit-calendar-picker-indicator {
|
||||
opacity: 100;
|
||||
}
|
||||
|
||||
.wrapper #sideBarContainer #filterContainer {
|
||||
height: 2em;
|
||||
background-color: lightgrey;
|
||||
}
|
||||
|
||||
.wrapper #sideBarContainer form {
|
||||
display: flex;
|
||||
padding-top: .3em;
|
||||
margin-left: .2em;
|
||||
margin-right: .2em;
|
||||
}
|
||||
|
||||
.wrapper #sideBarContainer form a {
|
||||
margin-right: .2em;
|
||||
}
|
||||
|
||||
.wrapper #sideBarContainer form input {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* Tree Hierarchy */
|
||||
.wrapper #treeContainer ul li {
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
/* Welcome View */
|
||||
.wrapper #welcome {
|
||||
flex-grow: 1; /* TODO: May not need this since implementing '.wrapper' */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 40em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.wrapper #welcome p {
|
||||
font-size: .9em;
|
||||
margin: .3em;
|
||||
}
|
||||
/*--------------------*/
|
||||
|
||||
|
||||
|
||||
/*
|
||||
Footer View
|
||||
-----------
|
||||
*/
|
||||
#footer {
|
||||
list-style: none;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: white;
|
||||
font-size: .9em;
|
||||
margin: 0;
|
||||
|
||||
background: #4169e1;
|
||||
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
#footer #statusBar {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#footer #toggle {
|
||||
min-width: 17em;
|
||||
}
|
||||
|
||||
#footer #statusBar span {
|
||||
line-height: 2em;
|
||||
margin-left: .7em;
|
||||
}
|
||||
|
||||
#footer #toggle span {
|
||||
line-height: 2em;
|
||||
}
|
||||
/*----------*/
|
||||
@@ -0,0 +1,212 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="home.css">
|
||||
|
||||
<!-- basicContext Library -->
|
||||
<link rel="stylesheet" href="../node_modules/basiccontext/dist/basicContext.min.css">
|
||||
<!-- <link rel="stylesheet" href="node_modules/basiccontext/dist/themes/default.min.css"> -->
|
||||
<link rel="stylesheet" href="../node_modules/basiccontext/dist/themes/bright.min.css">
|
||||
<link rel="stylesheet" href="../node_modules/basiccontext/dist/addons/popin.min.css">
|
||||
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="nav"></div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div id="sideBarContainer">
|
||||
|
||||
<input id="dirSelect" list="directories" type="text">
|
||||
<datalist id="directories">
|
||||
<option value="dir0"/>
|
||||
<option value="dir1"/>
|
||||
<option value="dir2"/>
|
||||
</datalist>
|
||||
|
||||
|
||||
<div id="filterContainer">
|
||||
<form action="#">
|
||||
<a href="#">Filter</a>
|
||||
<input type="text" name="fname" value="" onkeydown="">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="treeContainer">
|
||||
<ul class="mktree" id="mainTree">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="welcome">
|
||||
<p>Welcome to PerfView!
|
||||
PerfView is an application designed to simplify the collection and analysis of performance data.
|
||||
Pressing the F1 key will give you help for current view. Any blue hyperlinks in the UI also take you to help. For an overview of PerfView see the User's Guide . If you wish to ask a question that the documentation did not answer or if you have feedback or a bug report, see the feedback instructions in the documentation.
|
||||
If you are new to PerfView , we strongly recommend reading the tutorial or watch the tutorial videos . It should only take 10-20 minutes to walk through. Also recommend is reading what perfView can do for you .
|
||||
Optimizing Time, or Unmanaged Memory: Collecting ETW Profile Data
|
||||
PerfView can collect a time based ETW trace for investigating CPU and Server Response Time, as well as Wall Clock / Blocked Time , Unmanaged memory or Managed memory . For these cases PerfView has two ways of collecting ETW trace data :
|
||||
• Run a command and collect data while the command is running. Collect->Run (Alt-R)
|
||||
• Collect data machine wide by starting and stopping collection manually. Collect->Collect (Alt-C)
|
||||
Optimizing Managed Memory: Collecting .NET Runtime Heap Data
|
||||
PerfView can also collect data about the GC heap of a .NET Runtime process. See GC Heap Quick Start for more details.
|
||||
• Take a heap snapshot of an existing process Memory->Take Heap Snapshot (Alt-S)
|
||||
To Take a heap snapshot from a Process Dump simply double click on the .DMP file in the file view to the left.
|
||||
|
||||
Viewing Existing Profile Data
|
||||
The result of data collection is data stored in data files of varying extensions. The left pane is a list of file names in the current directory that PerfView knows how to open. Simply double click on the file of interest to view the data. You can change the current directory by either double clicking on a subdirectory or typing the name in the textbox in the upper left.
|
||||
If the file contains more than one view of the data then double clicking on the object populates children nodes in the treeview. Double clicking on one of the children will open the viewer for that view. Right clicking and selecting 'Help on Item' will take you to the help for that particular entry in the viewer. There are two main viewers of profile data:
|
||||
• A stack viewer which allows aggregation and filtering of events with associated stack traces.
|
||||
• An event viewer which allows filtering of time based events.
|
||||
|
||||
Diffing Profile Data
|
||||
PerfView has the ability to determine the difference between two traces, which is very useful in doing regression analysis. To use the Diff functionality first view both traces in separate stack view windows and (if necessary) filter out all but the region that represents an equivalent amount of work in each view. Then use the Diff menu on the stack view window of the 'regressed' trace and to select the other window as its baseline. See Diff Help for more.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<footer id="footer"></footer>
|
||||
|
||||
|
||||
|
||||
<!-- ****************** SCRIPTS BELOW ****************** -->
|
||||
|
||||
|
||||
<!-- Do NOT Delete
|
||||
This allows for script tags and requires('') to work both in the browser and i Electron -->
|
||||
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
|
||||
|
||||
|
||||
|
||||
<!-- Let's get some jQuery going here. -->
|
||||
<script type = "text/javascript" src = "../node_modules/jquery/dist/jquery.min.js"></script>
|
||||
<!-- alternate require method that works for Electron
|
||||
<script>window.$ = window.jQuery = require('./node_modules/jquery/dist/jquery.min.js')</script> -->
|
||||
|
||||
|
||||
<!-- Template Including -->
|
||||
<script>
|
||||
$.get('templates/navbar.html', function(data) {
|
||||
var template = $(data).children();
|
||||
$('.nav').append(template);
|
||||
resizeWelcomeDiv();
|
||||
});
|
||||
|
||||
$.get('templates/footer.html', function(data) {
|
||||
var template = $(data).children();
|
||||
$('#footer').append(template);
|
||||
resizeWelcomeDiv();
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<script src="../js/Delegate.js"></script>
|
||||
|
||||
|
||||
<!-- Allows for resizing of #welcome if there is too much text.
|
||||
This is unfortunately how it has to be done. Even Facebook.com has
|
||||
to do something like this for their footer (chat windows) bar. -->
|
||||
<script>
|
||||
var navBar, footer;
|
||||
|
||||
/* Try to avoid constantly traversing the DOM as much as we can. */
|
||||
function initVars() {
|
||||
navBar = document.getElementsByClassName("nav")[0];
|
||||
footer = document.getElementById("footer");
|
||||
resizeWelcomeDiv();
|
||||
}
|
||||
|
||||
function resizeWelcomeDiv() {
|
||||
var pageHeight = window.innerHeight;
|
||||
navBarHeight = navBar.offsetHeight;
|
||||
footerHeight = footer.offsetHeight;
|
||||
|
||||
var result = pageHeight - (navBarHeight + footerHeight);
|
||||
|
||||
// console.log("pageHeight - (navBarHeight + footerHeight): " + pageHeight + " - (" + navBarHeight + " + " + footerHeight + ") = " + result);
|
||||
document.getElementById("welcome").style.height = result + "px";
|
||||
}
|
||||
|
||||
window.onload = initVars;
|
||||
window.onresize = resizeWelcomeDiv;
|
||||
</script>
|
||||
|
||||
|
||||
<!-- basicContext Library -->
|
||||
<script src="../node_modules/basiccontext/dist/basicContext.min.js"></script>
|
||||
<!-- alternate require method that works for Electron
|
||||
<script>window.basicContext = require('./node_modules/basiccontext/dist/basicContext.min.js')</script> -->
|
||||
|
||||
<!-- basicContext Menu Test -->
|
||||
<script>
|
||||
document.querySelector('#treeContainer').addEventListener('contextmenu', function(e) {
|
||||
var clicked = function() { alert('Item clicked!') }
|
||||
let items = [
|
||||
{ title: 'Help on Item', icon: 'ion-help-buoy', fn: clicked, disabled: true },
|
||||
{ title: 'Refresh Dir', icon: 'ion-refresh', fn: clicked },
|
||||
{ title: 'Open', icon: 'ion-android-open', fn: clicked },
|
||||
{ title: 'Close', icon: 'ion-close', fn: clicked },
|
||||
{ title: 'Delete', icon: 'ion-android-remove-circle', fn: clicked },
|
||||
{ title: 'Rename', icon: 'ion-edit', fn: clicked },
|
||||
{ title: 'Merge', icon: 'ion-merge', fn: clicked },
|
||||
{ title: 'Make Local Symbol Dir', icon: 'ion-plus-round', fn: clicked },
|
||||
{ title: 'Zip', icon: 'ion-ios-briefcase', fn: clicked },
|
||||
{ title: 'UnZip', icon: 'ion-ios-briefcase-outline', fn: clicked }
|
||||
]
|
||||
|
||||
basicContext.show(items, e)
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<!-- MKTREE Library -->
|
||||
<script type="text/javascript" src="../libraries/mktree/mktree.js"></script>
|
||||
<link rel="stylesheet" href="../libraries/mktree/mktree.css" type="text/css">
|
||||
|
||||
|
||||
<!-- GET Tree View Hierarchy -->
|
||||
<script>
|
||||
// GET all directories and items and append them to tree view
|
||||
$(document).ready( function() {
|
||||
treeView = delegate.httpGet("/api/data/open", function (response) {
|
||||
items = response.items;
|
||||
var htmlFromJSON = createTreeFromJSON(items);
|
||||
$("#mainTree").append(htmlFromJSON);
|
||||
delegate.log("Completed: View");
|
||||
});
|
||||
});
|
||||
|
||||
// Recursively parse JSON tree
|
||||
function createTreeFromJSON(items) {
|
||||
var htmlToAppend = "";
|
||||
|
||||
for (var i = 0; i < items.length; ++i) {
|
||||
var item = items[i];
|
||||
|
||||
if (item.type == "dir"
|
||||
|| item.type == "directory"
|
||||
|| item.type == "file"
|
||||
|| item.type == "folder") {
|
||||
// It's a file
|
||||
htmlToAppend += "<li>" + item.name
|
||||
+ "<ul>\n"
|
||||
+ createTreeFromJSON(item.items)
|
||||
+ "\n</ul>\n" +
|
||||
"</li>";
|
||||
} else {
|
||||
// It's an item
|
||||
htmlToAppend += "<li>" + item.name + "</li>";
|
||||
}
|
||||
}
|
||||
|
||||
return htmlToAppend;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<!-- Do NOT Delete
|
||||
This allows for script tags and requires('') to work both in the browser and i Electron -->
|
||||
<script>if (window.module) module = window.module;</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,11 @@
|
||||
<footer id="footer">
|
||||
<div id="statusBar">
|
||||
<span>Completed: View (Elapsed Time: 0.070 sec)</span>
|
||||
</div>
|
||||
|
||||
<div id="toggle">
|
||||
<span>Ready</span>
|
||||
<a href="#">Log</a>
|
||||
<a href="#">Cancel</a>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -0,0 +1,68 @@
|
||||
<div class="nav">
|
||||
<ul class="navItems top-level-dropdown">
|
||||
<li>
|
||||
<a href="#">File</a>
|
||||
<ul class="second-level-dropdown">
|
||||
<li><a href="#">Help</a></li>
|
||||
<li><a href="#">Clear Temp Files</a></li>
|
||||
<li><a href="#">Clear User Config</a></li>
|
||||
<li><a href="#">Set Symbol Path</a></li>
|
||||
<li><a href="#">User Command</a></li>
|
||||
<li><a href="#">Exit</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Collect</a>
|
||||
<ul class="second-level-dropdown">
|
||||
<li><a href="#">Run</a></li>
|
||||
<li><a href="#">Collect</a></li>
|
||||
<li><a href="#">Abort</a></li>
|
||||
<li><a href="#">Merge</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Memory</a>
|
||||
<ul class="second-level-dropdown">
|
||||
<li><a href="#">Take Heap Snapshot</a></li>
|
||||
<li><a href="#">Take Heap Snapshot From Dump</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Size</a>
|
||||
<ul class="second-level-dropdown">
|
||||
<li><a href="#">Directory Size</a></li>
|
||||
<li><a href="#">Image Size</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Help</a>
|
||||
<ul class="second-level-dropdown">
|
||||
<li><a href="#">Help on Main View</a></li>
|
||||
<li><a href="#">Users Guide</a></li>
|
||||
<li><a href="#">Getting Started Videos</a></li>
|
||||
<li><a href="#">Get the Latest Version</a></li>
|
||||
<li><a href="#">Give Feedback or Ask a Question</a></li>
|
||||
<li><a href="#">Reference Guide</a></li>
|
||||
<li><a href="#">Command Line Help</a></li>
|
||||
<li><a href="#">User Command Help</a></li>
|
||||
<li><a href="#">Multi-Scenarios Analysis</a></li>
|
||||
<li><a href="#">Extending Perfview</a></li>
|
||||
<li><a href="#">Viewing Linux Data</a></li>
|
||||
<li><a href="#">Viewing External Data</a></li>
|
||||
<li><a href="#">Using EventSources</a></li>
|
||||
<li><a href="#">Release Notes</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="navItems helpfulLinks">
|
||||
<li><a href="#">Main View Help</a></li>
|
||||
<li><a href="#">Tutorial</a></li>
|
||||
<li><a href="#">Troubleshooting</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Tips</a></li>
|
||||
<li><a href="#">Video</a></li>
|
||||
<li><a href="#">Feedback</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -1,70 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="home.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="nav">
|
||||
<ul class="navItems" id="dropdownNav">
|
||||
<li><a href="#">File</a></li>
|
||||
<li><a href="#">Collect</a></li>
|
||||
<li><a href="#">Memory</a></li>
|
||||
<li><a href="#">Help</a></li>
|
||||
</ul>
|
||||
|
||||
<ul class="navItems" id="helpfulLinks">
|
||||
<li><a href="#">Main View Help</a></li>
|
||||
<li><a href="#">Tutorial</a></li>
|
||||
<li><a href="#">Troubleshooting</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="tree">
|
||||
Tree Container
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<p>Welcome to PerfView!
|
||||
PerfView is an application designed to simplify the collection and analysis of performance data.
|
||||
Pressing the F1 key will give you help for current view. Any blue hyperlinks in the UI also take you to help. For an overview of PerfView see the User's Guide . If you wish to ask a question that the documentation did not answer or if you have feedback or a bug report, see the feedback instructions in the documentation.
|
||||
If you are new to PerfView , we strongly recommend reading the tutorial or watch the tutorial videos . It should only take 10-20 minutes to walk through. Also recommend is reading what perfView can do for you .
|
||||
Optimizing Time, or Unmanaged Memory: Collecting ETW Profile Data
|
||||
PerfView can collect a time based ETW trace for investigating CPU and Server Response Time, as well as Wall Clock / Blocked Time , Unmanaged memory or Managed memory . For these cases PerfView has two ways of collecting ETW trace data :
|
||||
• Run a command and collect data while the command is running. Collect->Run (Alt-R)
|
||||
• Collect data machine wide by starting and stopping collection manually. Collect->Collect (Alt-C)
|
||||
Optimizing Managed Memory: Collecting .NET Runtime Heap Data
|
||||
PerfView can also collect data about the GC heap of a .NET Runtime process. See GC Heap Quick Start for more details.
|
||||
• Take a heap snapshot of an existing process Memory->Take Heap Snapshot (Alt-S)
|
||||
To Take a heap snapshot from a Process Dump simply double click on the .DMP file in the file view to the left.
|
||||
|
||||
Viewing Existing Profile Data
|
||||
The result of data collection is data stored in data files of varying extensions. The left pane is a list of file names in the current directory that PerfView knows how to open. Simply double click on the file of interest to view the data. You can change the current directory by either double clicking on a subdirectory or typing the name in the textbox in the upper left.
|
||||
If the file contains more than one view of the data then double clicking on the object populates children nodes in the treeview. Double clicking on one of the children will open the viewer for that view. Right clicking and selecting 'Help on Item' will take you to the help for that particular entry in the viewer. There are two main viewers of profile data:
|
||||
• A stack viewer which allows aggregation and filtering of events with associated stack traces.
|
||||
• An event viewer which allows filtering of time based events.
|
||||
|
||||
Diffing Profile Data
|
||||
PerfView has the ability to determine the difference between two traces, which is very useful in doing regression analysis. To use the Diff functionality first view both traces in separate stack view windows and (if necessary) filter out all but the region that represents an equivalent amount of work in each view. Then use the Diff menu on the stack view window of the 'regressed' trace and to select the other window as its baseline. See Diff Help for more.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</wrapper>
|
||||
|
||||
|
||||
<footer class="footer">
|
||||
<div class="status">
|
||||
<span>Completed: View (Elapsed Time: 0.070 sec)</span>
|
||||
</div>
|
||||
|
||||
<div class="toggle">
|
||||
<span>Ready</span>
|
||||
<a href="#">Log</a>
|
||||
<a href="#">Cancel</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,111 +0,0 @@
|
||||
|
||||
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Nav Bar Views
|
||||
-------------
|
||||
*/
|
||||
/* Wrapper for Nav Bar Views */
|
||||
.nav {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Wrapper for dropdownNav and helpfulLinks */
|
||||
.nav .navItems {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
background-color: deepskyblue;
|
||||
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
|
||||
.nav #dropdownNav {
|
||||
margin: 0;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.nav #helpfulLinks {
|
||||
margin: 0;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.nav #dropdownNav li a, .nav #helpfulLinks li a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: .5em;
|
||||
color: white;
|
||||
}
|
||||
/*------------*/
|
||||
|
||||
|
||||
/*
|
||||
Tree View and Main View
|
||||
-----------------------
|
||||
*/
|
||||
/* Wrapper for Tree View and Main View */
|
||||
.wrapper {
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
/* Tree View */
|
||||
.wrapper .tree {
|
||||
min-width: 20em;
|
||||
border-right-style: solid;
|
||||
border-right-color: deepskyblue;
|
||||
}
|
||||
|
||||
/* Main View */
|
||||
.wrapper .main {
|
||||
flex-grow: 1; /* TODO: May not need this since implementing '.wrapper' */
|
||||
}
|
||||
/*--------------------*/
|
||||
|
||||
|
||||
|
||||
/*
|
||||
Footer View
|
||||
-----------
|
||||
*/
|
||||
.footer {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
||||
background: deepskyblue;
|
||||
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
.footer .status {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.footer .toggle {
|
||||
min-width: 17em;
|
||||
}
|
||||
|
||||
.footer .status span {
|
||||
line-height: 2em;
|
||||
margin-left: .2em;
|
||||
}
|
||||
|
||||
.footer .toggle span {
|
||||
line-height: 2em;
|
||||
}
|
||||
/*----------*/
|
||||
Reference in New Issue
Block a user